H5 判断页面是否处于前台

平时制作H5互动时会有页面切出去需要关闭音乐或者暂停进度的需求，此段代码可用于浏览器页面是否处于前台的判断。此处用了数组承载监听事件是为了多个组件使用的情况，可自行封装成订阅或注册模式。

源码如下：

window.pageShowCbList = [];
window.pageHideCbList = [];

window.onload = () => {
    pageShowOrHide(
        () => {
            for (var i = 0; i < window.pageShowCbList.length; i++) {
                var callback = window.pageShowCbList[i];
                callback && callback();
            }
        },
        () => {
            for (var i = 0; i < window.pageHideCbList.length; i++) {
                var callback = window.pageHideCbList[i];
                callback && callback();
            }
        }
    );

    window.pageShowCbList.push(() => {
        console.log("show");
    });

    window.pageHideCbList.push(() => {
        console.log("hide");
    });
}

function pageShowOrHide(showCb, hideCb) {
    var hidden, state, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
    }
    var cb = function () {
        if (document[state] == hidden) {
            hideCb && hideCb();
        } else {
            showCb && showCb();
        }
    };
    document.removeEventListener(visibilityChange, cb, false);
    document.addEventListener(visibilityChange, cb, false);
}