JS实现用户离开页面标题变动

发表于 | 更新于 | 分类于
字数统计 377 | 阅读时长 1 分
使用JavaScript实现当用户离开页面时判断并在标题栏显示不一样的效果正如你所见，这个网站上使用了JS用来判断当前用户是否离开本页面。当你离开本页面时，标题栏会显示：快回来快回来~ 王政乔当你返回本页面时，标题又自动恢复成原来的样子。这是怎么实现的呢？接下来教你如何使用

前言

正如你所见，这个网站上使用了JS用来判断当前用户是否离开本页面。

当你离开本页面时，标题栏会显示

快回来快回来~ 王政乔

当你返回本页面时，标题又自动恢复成原来的样子。

这是怎么实现的呢？

接下来教你如何使用

教程

第一步：在母版页或所有页面中指定位置添加代码

这是教程的第一步。

如果你的网站具有统一的风格（这是一般情况），如统一的Head、不同的Body和统一的Bottom，那你可以在Head中添加下方的代码，将其中内容修改即可。

反之，那就需要你每个页面自己动手咯。

由于现在大部分H5支持Javascript，因此下方代码直接复制粘贴即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
 var titleLocked = false;
 var showTitle;
 if (!titleLocked){
  showTitle = document.title;
 }
 document.addEventListener('visibilitychange',function(){
  var isHidden = document.hidden;
  if(isHidden){
   document.title = '快回来快回来~-王政乔';
  } else {
    document.title = showTitle;
  }
 }
);
</script>

第二步：测试

保存好代码，就可以直接进行测试了。如果成功了，麻烦点下赞，评论区留个言哈~。

代码解析

代码主要用了visibilitychange这一事件，JS通过添加这一事件的监听器从而实现这一效果。唯一需要值得注意的地方是为了显示原来的标题，需要提前将该标题以变量方式保存~