下面将对document事件visibilitychange及两个属性hidden和visibilityState的特性及应用做简单介绍与记录。
hidden和visibilieyState属性
hidden与visibilityState均为document的只读属性。
其中document.hidden的值是一个布尔值，表示标签页的显示或隐藏。
而document.visibilityState相对详细一些，目前有四个可能的值：
-
visibble：页面部分内容可见。意味着该标签页是一个非最小化的可见标签页，可能被别的页面覆盖了一部分。 -
hidden:页面内容不可见。意味着该页面是后台标签页或者最小化，或者系统是锁屏状态等。 -
prerender:网页内容被预渲染并且用户不可见。 -
unloaded:如果文档被卸载，将返回这个值。
一般情况下，使用document.hidden就可以满足需求。为了支持老版本浏览器，我们对document.hidden做一些前缀处理，以便跨浏览器获得页面可见性：
function getHidden (){
let prefixs = ['webkit','moz','mos','o'];
if ('hidden' in document) return document.hidden;
for (let i = 0; i < prefixs.length; i++) {
if (`${prefixs[i]}Hidden` in document){
return document[`${prefixs[i]}Hidden`];
}
}
// not support
return null;
}
同样，对document.visibilityState也做一下前缀处理：
function getVivibilityState (){
let prefixs = ['webkit','moz','mos','o'];
if ('visibilityState' in document) return document.visibilityState;
for (let i = 0; i < prefixs.length; i++) {
if (`${prefixs[i]}VisibilityState` in document){
return document[`${prefixs[i]}VisibilityState`];
}
}
// not support
return null;
}
visibilitychange事件
当浏览器可见性发生变化得时候，这个事件会被触发。实际的应用场景例如：标签页隐藏的时候暂停播放流媒体文件、停止一些不必要的轮询；页面显示的时候出现提示弹窗（点击支付跳转到新开页面，再返回这个页面时弹出支付状态相关提示弹窗）等等。
我们可以在document对象上注册一个监听visibilititychange 的事件，当浏览器可见性发生变化的时候利用hidden或者visibilityState判断页面的状态，然后处理一些业务逻辑。以比较常用的hidden为例：
function pageHiddenHandler () {
let isHidden = getHidden();
// 改变页面title用户观察状态
document.title = isHidden ? '藏起来了' : '闪现';
}
document.addEventListener('visibilitychange',pageHiddenHandler,false);
