在离开和进入页面时改变页面的标题
in 书签 with 0 comment

在离开和进入页面时改变页面的标题

in 书签 with 0 comment

有时候我们在浏览网页的时候会看到一些有趣的事情,比如当你离开某页面的时候,那个页面会自动变化标题,可是当你好奇再点进来后标题又变成了原来的,这是怎么回事呢?怎么实现的?

如:我藏好了哦~

(つェ⊂)看不到我~

(´∇`) 被发现啦~

你看到这么萌的话你会不会好奇点进来呢?

本文那我们就来说下实现此效果的方法

效果图(截图自 Dye ' s Books):

1.jpg

QQ截图20170801202142.jpg

原理:

使用了HTML5的Page Visibility API

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

document.hidden: Boolean值,表示当前页面可见还是不可见

document.visibilityState: 返回当前页面的可见状态,取值有 hidden visible prerender preview

visibilitychange: 当可见状态改变时候触发的事件

以前只知道可以通过 iframe + onblur/onfocus事件 来检测页面可见性,有了这个 API 真是方便优雅了很多啊

完整代码如下:

<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>

使用方法,直接复制代码粘贴到网站底部文件里(一般为footer.php),保存后清理缓存即可。

本文内容由帖子网发布,代码部分转载自网络,如需转载本文章请注明出处,谢谢。

Responses