html5中页面可见性的判断（附代码）

时间2024-01-23 15:32:29发布访客分类HTML浏览347

导读：收集整理的这篇文章主要介绍了html5中页面可见性的判断（附代码），觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于htML5里页面可见性的判断（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有...

收集整理的这篇文章主要介绍了html5中页面可见性的判断（附代码），觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于htML5里页面可见性的判断（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

visibilITychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务

document.hidden

新出现的document.hidden属性，它显示页面是否为用户当前观看的页面，值为ture或false。

document.visibilitystate

visibilityState的值要么是visible (表明页面为浏览器当前激活tab，而且窗口不是最小化状态)，要么是hidden (页面不是当前激活tab页面，或者窗口最小化了。)，或者PRerender (页面在重新生成，对用户不可见。).

visibilitychange事件

// 各种浏览器兼容 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";
 }
 // 添加监听器，在title里显示状态变化document.addEventListener(visibilityChange, function() {
         document.title = document[state];
 }
    , false);
    // 初始化 document.title = document[state];

添加监听

document.addEventListener("visibilitychange", function() {
      console.LOG( document.visibilityState );
}
    );
document.addEventListener("msvisibilitychange", function() {
      console.log( document.msVisibilityState);
}
    );
document.addEventListener("mozvisibilitychange", function() {
      console.log( document.mozVisibilityState);
}
    );
document.addEventListener("webkitvisibilitychange", function() {
      console.log( document.webkitVisibilityState);
}
    );