visibility API
2021-02-16 23:17
阅读：328
这是一篇简短的小博文，介绍检测页面是否可见的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);
评论
亲，登录后才可以留言！