网页失去焦点时修改title值的装饰

前言

翻别人的网站时有见到过,浏览器切换到其他标签,原来网页的标题就会改变卖萌。看起来很有趣,那我当然要学着实现一下了。

原理

visibilitychange事件是Html5新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,它也有个对应的属性visibilityState,用于检测当前页面的状态值为hidden还是visible:

1.hidden:页面在后台标签页中或者浏览器最小化
2.visible:页面在前台标签页中
3.prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true
4.unloaded:页面正在从内存中卸载

所以我们只要写个js监听一下这个事件,在属性为hidden时直接把title改掉即可。

代码

<script>
     document.addEventListener('visibilitychange', function() {
      var isHidden = document.hidden;
      if (isHidden) {
       document.title = 'QAQ 快回来啊 | 某魏\'s Blog';
      } else {
       document.title = '某魏\'s Blog';
      }
     });
</script>

嗯,是直接copy大佬的代码

效果

title1.JPGtitle2.JPG
啊哈~

一些问题

虽然能变title是好看的了,但是原来的title(博文的标题)会被刷掉。所以这里我们修改一下代码:

var title1 = 'QAQ 快回来啊  |  ' + document.title;
var title2 = 'ヽ(✿゚▽゚)ノ欢迎回来! |  ' + document.title;
document.addEventListener('visibilitychange', function() {
    var isHidden = document.hidden;
    if (isHidden) {
        document.title = title1;
    } else {
        document.title = title2;
    }   
});

参考 :
https://www.cnblogs.com/xueweijie/p/7133077.html

Last modification:May 11th, 2019 at 08:41 pm

Leave a Comment