监听微信手Q的挂起事件（visibilitychange）

H5有一个事件叫 visibilitychange 能够用于监听当前页面是否被挂起。以下：

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

可是呢，手Q不会触发这个事件！由于手Q的网页永远都不会被挂起，因此visibilitychange事件不会被触发。

手Q内的网页永远不会被挂起？
是的。能够在手Q中运行如下代码：

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被呼起
    }
});

当前（2017-10.26），微信是支持 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 {
        // 网页被呼起
    }
});

挂起事件有什么用吗？
若是微信手Q的网页有音频播放，那么按下 HOME 键挂起应用后，音频也会继续在播放。这个时候使用 visibilitychange 事件就有用了。以下：

document.addEventListener("visibilitychange", function(e) {
    if(e.hidden) {
        // 网页被挂起 ---- 暂停音乐
        audio.pause(); 
    }
    else {
        // 网页被呼起 ---- 播放音乐
        audio.play(); 
    }
});