这是一篇简短的小博文,介绍检测页面是否可见的API。
参考 https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
document.hidden:如果页面可见返回true,否则返回false
document.visibilityState:返回状态字符串,可见visible,不可见hidden。文档上还写了prerender和unloaded。
visibilitychange事件在页面可见性变化时触发。切换标签、最小化窗口会触发,但是如果打开网页状态下开启其他应用不会触发。
下面是兼容代码:
var hidden,visibilityChange if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } function handleVisibilityChange() { console.log(document.visibilityState) if (document[hidden]) { hiddenFun() //这里是要执行的函数 }else { visibleFun() //这里是要执行的函数 } } document.addEventListener(visibilityChange, handleVisibilityChange, false);