有时候不知道用户是不是正在和页面交互,是困扰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