页面可见性判断:document.hidden与visibilitychange事件

我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放。页面的展示的状态的判断就需要用到html5新增的一个api: document.hidden

document.hidden 属性:bool型,表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化。

visibilitychange 事件:当文档的可见性改变时触发。

兼容性写法如下,当在浏览器里切换标签页或者最小化时就会console打印出状态的变化:

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
   hidden = "hidden";
   visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
   hidden = "mozHidden";
   visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
   hidden = "msHidden";
   visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
   hidden = "webkitHidden";
   visibilityChange = "webkitvisibilitychange";
}

// 添加监听器
document.addEventListener(visibilityChange, function() {
   console.log("当前页面是否被隐藏:" + document[hidden]);
}, false);
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章