页面可见性 API

使用情景

• 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片
• 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新
• 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
• 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

document.hidden/document.msHidden/document.webkitHidden // 返回true或false
document.visibilityState // 'visible' 'hidden' 'prerender' 'unloaded'
// 处理页面可见属性的改变
document.addEventListener(visibilityChange, ()=>{}, false);
复制代码

浏览器兼容性

• desktop

Chrome 33
Firefox (Gecko) 18 (18) [2]
Internet Explorer 10
Opera 12.10[1]
Safari (WebKit) 7
复制代码

• mobile

Android 4.4 webkit
Firefox Mobile (Gecko) 18.0 (18) [2]
IE Phone 10
Opera Mobile 12.10[1]
Safari Mobile 7
复制代码

转载于:https://juejin.im/post/5c6bc2c0f265da2da23d2143