N003 初探Page Visibility API



前阵子超能陆战队真是火得一塌糊涂,随之而来的不仅是票房光环,也催生了一系列的周边(我的网站之前也使用了Baymax元素)。

大概是过年的时候,我发现36Kr的标签页居然在切换时可以显示颜文字版的大白(●––●),但只能猜出是用JavaScript做出的效果,通过某种方式获取窗口状态之类,具体实现就不清楚了。通过"36Kr"、"大白"、"标签页"等关键词搜索却无功而返,又过了几天甚至36Kr的这个彩蛋也下架了。

我以为再也没办法知道实现方法了。直到前阵子我又抽风搜索了一次,居然有了重大收获。

Page Visibility API

通过Jeff等人的文章,我有种豁然开朗的感觉。经研究,这是一个名叫Page Visibility的酷炫API。众所周知,除了远古级别的浏览器(并没有黑IE),现代浏览器的标签页可以方便的进行Tab切换以实现不同的功能需求(比如视频缓冲、页面加载,甚至保护个人隐私...)。虽然每次只有一个可见页面,但是多个动态任务同时执行时无疑会消耗大量资源。因而它的主要目的是通过监听标签页状态来节约系统资源

实现"大白"

API的好处是可以发挥创造力做出有趣的事情,36Kr的"大白"就是这么实现的。核心代码如下:

var content=document.title
function changeTab(){
    if(!document.hidden){
        document.title=content;
        }else{
            document.title="(●––●) Hi, I'm Brant!";
        }
    }
document.addEventListener("visibilitychange", changeTab);

在相同URL的标签页分别处于激活态和隐藏态时的效果图如上图(注:本站点的旧版本主页):

performance
效果图

其实兼容性也是以后需要考虑在内的问题,针对不同浏览器和不同版本其代码稍有不同,这里就不再赘述了。

参考文章

评论