JS 监听浏览器标签页显示隐藏
API
document.hidden
判断页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览器最小化- document.visibilityState
（只读属性）, 返回document的可见性，4个值：hidden：文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态'
visible：此页面在前景标签页中，并且窗口没有最小化
prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
- unloaded：页面正在从内存中卸载
- visibilitychange事件
当标签页从可见变为不可见或者从不可见变为可见时（包括标签页切换与浏览器最小化），会触发该事件
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
console.log(document.visibilityState)
if (isHidden) {
document.title = '隐藏';
} else {
document.title = '显示';
}
});浏览器兼容性
| Chrome (Webkit) | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|
| 33+(-webkit-) | 56+(-moz-) | 10+(-ms-) |
适用场景
标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询
转播
