页面可见生Page Visibility

Posted 2020-08-23 坚持不懈?

Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState 。如果当前的标签被激活了，那么 document.hidden 的值为 false ，否则为 true 。visibilityState 则有4个可能值

1.hidden：当浏览器最小化、切换标签、电脑锁屏时 visibilityState 值是 hidden
2.visible：当浏览器最顶级上下文（context）的 document 至少显示在一个屏幕当中时，返回 visible；当浏览器窗口没有最小化，但是浏览器被其他应用遮挡时，这时也为 visible
3.prerender：当文档被加载到屏幕画面以外或者不可见时返回 prerender，这个是非必要属性，浏览器可选择性的支持。
4.unloaded：当文档将要被离开 ( unload ） 时返回 unloaded，浏览器也可选择性的支持这个属性

另外，document 上会添加 visibilitychange 事件，当 document 的可见性改变时触发该事件。

浏览器支持与私有前缀

/*!
 * pageVisibility.js by zhangxinxu 2012-11-29
**/

var pageVisibility = (function() {
    var prefixSupport;
    var isPageVisibilitySupport = (function() {
        var support = false;
        if (typeof window.screenX === "number") {
            ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                if (support == false && document[prefix + ‘Hidden‘] != undefined) {
                    prefixSupport = prefix;
                    support = true;  
                }
            });        
        }
        return support;
    })();
    
    var isHidden = function() {
        if (isPageVisibilitySupport) {
            return document[prefixSupport+"Hidden"];
        }
        return undefined;
    };
    
    var visibilityState = function() {
        if (isPageVisibilitySupport) {
            return document[prefixSupport+ "VisibilityState"];
        }
        return undefined;
    };
    
    return {
        hidden: isHidden(),
        visibilityState: visibilityState(),
        visibilitychange: function(fn, usecapture) {
            usecapture = undefined || false;
            if (isPageVisibilitySupport && typeof fn === "function") {
                return document.addEventListener(prefixSupport + "visibilitychange", function(evt) {
                    this.hidden = isHidden();
                    this.visibilityState = visibilityState();
                    fn.call(this, evt);
                }.bind(this), usecapture);
            }
            return undefined;
        }
    };    
})(undefined);

测试发现，如下浏览器都是支持的：

• Chrome 21
• FireFox 16.0.2
• Opera 12.11
• IE10

参考：http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/