首页 > 前端 > 页面可见性API

页面可见性API

一、是什么

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

它由三个部分组成:

document.hidden属性:布尔值,当页面被隐藏时(切换标签或者最小化浏览器时),返回true

document.visibilityState属性:这是一个字符串指示页面的状态,它有四个值

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

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

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

· unloaded 页面尚未被加载

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

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

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

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

Screenshot_2

二、有什么用

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

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

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

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

· ……

 

三、怎么用

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

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

document.addEventListener("visibilitychange", handleVisibilityChange);

 

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

ele.me

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

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 ? "看这里,看这里!": "蜀山客";
});

Screenshot_322

 

再”恶心”一点,可以等用户回来,加个欢迎回来之类的弹框:

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

 

四、兼容性

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

Screenshot_5

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

 

五、See also

MDN — Page Visibility API

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

 


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