通过 document.hidden 与 visibilitychange 事件判断网页可见性和操作

  • Z时代
  • 2024-01-10
  • 分类：IT

小程序的应用的生命周期很完美了，网页就不太理想了，不过我们可以通过相关的函数去实现类似的功能，最常见的就是在观看视频的时候，如果用户切换了标签或者是打开了其他应用程序，我们可以暂停视频的播放，当用户回来的时候，我们再继续播放。

通过 document.hidden 与 visibilitychange 事件判断网页可见性和操作

页面的展示的状态的判断就需要用到 HTML5 新增的API：document.hidden。

  • document.hidden 属性：boolean类型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化。

  • 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";
}
// 添加监听器
document.addEventListener(visibilityChange, function() {
  console.log("当前页面是否被隐藏：" + document[hidden]);
}, false);

上面的代码在 PC 上运行没什么问题，但是在 手机 QQ 浏览器 上就没啥效果了，因为手机 QQ 浏览器的网页永远都不会被挂起，所以 visibilitychange 事件不会被触发。

手机 QQ 浏览器为了解决这个问题向开发者提供了一个叫 qbrowserVisibilityChange  的事件：https://open.mobile.qq.com/api/common/index#api:qbrowserVisibilityChange

能过这个事件可以监听手机 QQ 浏览器是否被挂起（注意我这里说的是手机 QQ 浏览器是否被挂，不是说手机 QQ 浏览器的网页被挂起）。如果按照腾讯提供 API ，那么调用 qbrowserVisibilityChange 方法如下：

document.addEventListener("qbrowserVisibilityChange", function(e){
  if(e.hidden) {
    // 手Q被挂起
  } else {
    // 手Q被呼起
  }
});

微信是支持 visibilitychange 事件的，这也就是说微信被挂起时，微信的内嵌页面也会被挂起，可以使用以下方法来监听微信网页的挂起状态：

ocument.addEventListener("qbrowserVisibilityChange", function(e){
  var evt = document.createEvent("HTMLEvents"); 
  evt.initEvent("visibilitychange", false, false); 
  evt.hidden = e.hidden; 
  document.dispatchEvent(evt); 
}, true); 
document.addEventListener("visibilitychange", function(e) {
  e.hidden = e.hidden === undefined ? document.hidden : e.hidden; 
}, true);

在业务代码直接引用下面的代码：

document.addEventListener("visibilitychange", function(e) {
  text.innerHTML = e.hidden; 
  if(e.hidden) {
    // 网页被挂起
  } else {
    // 网页被呼起
  }
});

以上是 通过 document.hidden 与 visibilitychange 事件判断网页可见性和操作 的全部内容， 来源链接： utcz.com/p/232112.html

回到顶部