:) 很高兴遇见你 - 在离开和进入页面时改变页面的标题

75926EB1-090C-4D62-A0D3-BF9ABEA1E643.png

这篇文章看到一项HTML5特性,在离开和进入页面时改变页面的标题。

原理:

使用了HTML5的Page Visibility API

目前页面可见性API有两个属性,一个事件,如下:

document.hidden: Boolean值,表示当前页面可见还是不可见
document.visibilityState: 返回当前页面的可见状态,取值有 hidden visible prerender preview
visibilitychange: 当可见状态改变时候触发的事件

代码:

<script>
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '(つェ⊂)我藏好了哦~ ' + OriginTitile;
        clearTimeout(titleTime);
    }
    else {
        document.title = '(*´∇`*) 被你发现啦~ ' + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});
</script>
来源:[Anotherhome](https://www.anotherhome.net/2153)

  2015-12-26     JS     返回顶部