通过 document.hidden 与 visibilitychange 事件判断网页可见性和操作 - 文章教程

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

发布于 2019-04-26 字数 3003 浏览 2280 评论 0

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

通过 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 {
    // 网页被呼起
  }
});

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0