页面可见性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
转载请注明出处,欢迎分享