visibilitychange使用方法

H5 页面可见性改变事件(visibility change)

H5 有一个事件叫 visibilitychange，当浏览器的某个标签页切换到后台，或从后台切换到前台时，就会触发该信息，代码如下：

document.addEventListener("visibilitychange", () => {
  if(document.hidden) {
    // 页面被挂起
  }
  else {
    // 页面呼出
  }
});

• 手Q不会触发这个事件,因为手Q的网页永远都不会被挂起，所以visibilitychange事件不会被触发, 可以用以下代码进行测试

setInterval(() => document.write(new Date().getTime() + "\<br\>"), 1000);
// 按下HOME键等待十几秒后再呼起手Q，你会发现在页面输出的时间并没有中断，而是很平稳地输出。

• 手Q为了解决这个问题向开发者提供了一个叫 qbrowserVisibilityChange 的事件：https://open.mobile.qq.com/api/common/index#api:qbrowserVisibilityChange
• 能过这个事件可以监听手Q是否被挂起（是手Q是否被挂，不是手Q的网页被挂起）。如果按照腾讯提供 API ，那么调用 qbrowserVisibilityChange 需要引用一个 js，如下

<script type="text/javascript" src="http://pub.idqqimg.com/qqmobi...";></script>

• 使用方式

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

• 后来发现，其实手Q把 qbrowserVisibilityChange 直接绑定到 document 对象上了。也就是说在手Q现在不需要引用额外的 js 文件就可以直接调用 qbrowserVisibilityChange 事件，如下：

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

• 微信是支持 visibilitychange 事件的，这也就是说微信被挂起时，微信的内嵌页面也会被挂起。
• 如果微信的 webview 是 UIWebView 的话，那么不支持 visibilitychange，也没有一个对应的事件可以监听微信是否被挂起
• UIWebview 只存在于 2017 年前的版中，即 UIWebview 的情况可以忽略
• 可以使用以下方法来监听「微信手Q」的挂起状态：

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