banner
DIYgod

Hi, DIYgod

写代码是热爱,写到世界充满爱!
github
twitter
bilibili
telegram
email
steam
playstation
nintendo switch

我藏好了哦

titlehide

在 Sonic 853 看到的神奇的一幕,一颗赛艇,果断扒来水一贴

原作者:成天不高兴的栗山未来

** 什么鬼:** 离开和进入页面时改变 title

原理:

使用了 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);
    }
});
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。