瀏覽器切換窗口事件

方法來源：張鑫旭博客。

今天有個需求，瀏覽器頁面切換時執行一下事件，但是F5刷新頁面時，不需要執行。網上找到了解決辦法。

考慮到瀏覽器兼容性，封裝的公用對象，這個對象有倆個屬性，一個方法，如下：

var pageVisibility = (function() {
    var prefixSupport, keyWithPrefix = function(prefix, key) {
        if (prefix !== "") {
            // 首字母大寫
            return prefix + key.slice(0,1).toUpperCase() + key.slice(1);    
        }
        return key;
    };
    var isPageVisibilitySupport = (function() {
        var support = false;
        if (typeof window.screenX === "number") {
            ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) {
                    prefixSupport = prefix;
                    support = true;   
                }
            });        
        }
        return support;
    })();
    
    var isHidden = function() {
        if (isPageVisibilitySupport) {
            return document[keyWithPrefix(prefixSupport, "hidden")];
        }
        return undefined;
    };
    
    var visibilityState = function() {
        if (isPageVisibilitySupport) {
            return document[keyWithPrefix(prefixSupport, "visibilityState")];
        }
        return undefined;
    };
    
    return {
        hidden: isHidden(),   // 當前tab窗口離開時為true，進入時為false
        visibilityState: visibilityState(),   // 當前tab窗口離開時為hidden，進入時為visible
        visibilitychange: function(fn, usecapture) {   // 當前tab窗口離開或者進入時會執行該事件
            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);

 

 需要時調用對象的 visibilitychange 方法：

pageVisibility.visibilitychange(function(){
    if(!pageVisibility.hidden){   // 頁面進入時才執行
        console.log("你切換回當前頁面啦...");
    }
})