Page Visibility API（页面是否可见）

有时候不知道用户是不是正在和页面交互,是困扰web开发人员的一大问题,尤其是界面用动画或者是其它一些一直占用资源的效果时。如果页面最小化或者是隐藏在其它标签页面后(即当前不是可见的),那么有些功能可以停下来,这样更节约资源。 
Page Visibility API就是为了让开发人员知道页面是否对用户可见而推出来的。 
Page Visibility API本身比较简单,由以下三个部分组成。 
1、document.hidden:表示页面是否隐藏;true表示隐藏,false表示没有隐藏。页面隐藏包括页面在后台标签页或者浏览器最小化 
2、document.visibilityState:表示下列4个可能状态的值。 
a.页面在后台标签页中或者浏览器最小化 “hidden” 
b.页面在前台标签页中 “visible” 
c.实际的页面已经隐藏,但用户可以看到页面的预览 “prerender” 
d.页面在屏幕外执行预渲染处理 “preview” 
3、visibilitychange事件:当文档从可见变为不可见或者不可见变为可见时,触发该事件。 
chrome需要加上webkit前缀,即document.webkitHidden,IE中需要加上ms前缀,即document.msHidden,在firefox中需要加上moz前缀,即document.mozHidden. 
检查浏览器是否支持Page Visibility API的方法

console.log(typeof document.hidden)//boolean表示是支持的,undefined表示不支持。目前,IE11,Chrome(46.0.2490.86 m) 
,firefox(45)版本已经能支持document.hidden。

兼容代码如下:

var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
}
// 添加监听器，在title里显示状态变化
document.addEventListener(visibilityChange, function() {
    console.log(document[hidden] + " || " +document[state]);
}, false);

可以在页面隐藏或者页面显示时,添加对应的处理程序。 
个人觉得这个API虽然简单,但是非常有用处。

转载于：https://blog.csdn.net/liuyan19891230/article/details/51261635