document API之visibilitychange事件：判断页面可见性

下面将对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);