页面可见性API

一、是什么

页面可见性API（Page Visibility API）是一个为了让你知道页面当前是否对用户可见而推出的一个HTML5 API。

它由三个部分组成：

1· document.hidden属性：布尔值，当页面被隐藏时（切换标签或者最小化浏览器时），返回true

2· document.visibilityState属性：这是一个字符串指示页面的状态，它有四个值

· visible 页面在当前可视范围内

· hidden 页面在后台标签页或浏览器最小化

· prerender 页面在后台标签页或浏览器最小化，但是可以通过某些方式看到预览（例如window系统中把鼠标移到任务栏浏览器图标会浮出一个预览的小窗口）

· unloaded 页面尚未被加载

3· visibilitychange事件：当用户将页面从可见切换为不可见，或将不可见切换为可见时，触发该事件

根据上面三个部分，可以写出这么一个例子：

document.addEventListener("visibilitychange", function() {
    console.log(document.hidden + " ---- " + document.visibilityState);
});

复制到console执行，来回切换页面，就能看到输出效果：

二、有什么用

用户是否正在与页面进行交互，这一点对网站开发人员来说颇有用处，例如：

· 你的网站在播放着视频或者音频，那么当用户切换到别的页面，那我们就可以暂停播放，等用户切回来了，就继续播放视频/音频；

· 网站含有大量的图片请求，我们不希望用户在做着其它事的情况下，还从我们的服务器里下载这么多的资源；

· 我们可以更加精确地计算用户停留在你的页面的时间，而不把你的页面置于后台的那段时间也算进去；

· ......

三、怎么用

例如上面说到的播放暂停的情况，可以这样写：

function handleVisibilityChange() {
    if (document.hidden) {
        pause();    //暂停播放
    } else  {
        play();     //继续播放
    }
}

document.addEventListener("visibilitychange", handleVisibilityChange);

还有一些脑洞大开的实现，例如我们可以在用户离开页面时换个打趣的标题，例如饿了么：

在小剧客栈那里看到了饿了么的实现代码：

var r = "记得回来点单哦！ - 饿了么",
n = document.title;
angular.$(document).on("visibilitychange",function(){
    document.title = "hidden"===document.visibilityState ? r : n
})

所以也可以这么实现：

document.addEventListener('visibilitychange', function() {
    document.title = document.hidden ? "看这里，看这里!": "蜀山客";
});

再"恶心"一点，可以等用户回来，加个欢迎回来之类的弹框：

document.addEventListener('visibilitychange', function() {
    if(document.hidden){
        document.title = "看这里，看这里!";
    }else {
        document.title = "蜀山客";
        alert("实在是太棒了，欢迎客官的回来！");
        //网站再来个灯光闪烁+背景音，自动脑补...
    }
});

四、兼容性

Page Visibility API 算是一个比较新的东西了，这是Caniuse上的兼容性报告：

可见目前较新的浏览器支持好一点，所以尝鲜派可以大无畏的使用这个有趣的API。

五、See also

MDN -- Page Visibility API

张鑫旭 -- Page Visibility(页面可见性) API介绍、微拓展

本文标题：页面可见性API
转载请注明出处，欢迎分享