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); });

相关文章推荐：

PHP中抽象方法以及抽象类与接口的简单介绍

什么是容器(Container)和门面(Facade)？thinkphp5.1中容器和门面的浅析

thinkphp模板如何判断是手机微信支付还是微信扫码支付

以上就是html5中页面可见性的判断（附代码）的详细内容，更多内容请关注技术你好其它相关文章！