平时制作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);
}