离开页面时变换浏览器标题

转载 发表于 WEB 分类,标签: 热度:644°

离开页面或重新进入页面时时变换浏览器标题,这个功能在好多人博客上看到过,很是眼红啊,现在自己终于也弄明白怎么搞的了。

来源:Anotherhome

原理: 使用了HTML5的Page Visibility API 目前页面可见性API有两个属性,一个事件,如下: document.hidden: Boolean值,表示当前页面可见还是不可见 document.visibilityState: 返回当前页面的可见状态,取值有 hidden visible prerender preview visibilitychange: 当可见状态改变时候触发的事件 以前只知道可以通过 iframe + onblur/onfocus事件 来检测页面可见性,有了这个 API 真是方便优雅了很多啊

代码

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);
    }
});


lll

0 篇评论

发表我的评论