使用Page Visibility监听网页是否处于激活（可见）状态

在饿了么点外卖的时候你会发现，如果你离开此页的话他的网页title会改变：

在这里虽然显得没那么重要，但是如果当前你在播放视频，离开此页的话我们可以实现自动暂停功能，还是挺方便的。

实现这个功能主要用到了Page Visibility API 这个功能。参考地址：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

比如我们写一个简单的示例，当我们切换到其他页面的时候改变该页面的title。

<script>
(function() {
    var hidden = "hidden";

    //各个浏览器属性兼容
    if (hidden in document)
        document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document)
        document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document)
        document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document)
        document.addEventListener("msvisibilitychange", onchange);

    else if ("onfocusin" in document)
        document.onfocusin = document.onfocusout = onchange;

    else
        window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

    //主要功能代码
    //网页状态改变事件
    function onchange(evt) {
        if(document[hidden]){
            document.title = "false";
        }else{
            document.title = "true";
        }
    }


    if (document[hidden] !== undefined)
        onchange({
            type: document[hidden] ? "blur" : "focus"
        });
})();
</script>

效果：

在上面的链接中有说道以前我们可以监听window对象的focus和blur事件，从而实现上述功能，但是这个方式存在问题，因为他判断的是网页“是否获取到焦点”，而不是对用户“可不可见”。

window.addEventListener("blur", onBlur);
window.addEventListener("focus", onFocus);

function onBlur(){
    document.title = false;
}
function onFocus(){
    document.title = true;
}