H5有一个事件叫 visibilitychange
可以用于监听当前页面是否被挂起。如下:
document.addEventListener("visibilitychange", () => { if(document.hidden) { // 页面被挂起 } else { // 页面呼出 }});
但是呢,手Q不会触发这个事件!因为手Q的网页永远都不会被挂起,所以visibilitychange
事件不会被触发。
手Q内的网页永远不会被挂起?
是的。可以在手Q中运行以下代码:setInterval(() => document.write(new Date().getTime() + "\
"), 1000);
按下HOME键等待十几秒后再呼起手Q,你会发现在页面输出的时间并没有中断,而是很平稳地输出。
好消息是手Q为了解决这个问题向开发者提供了一个叫 qbrowserVisibilityChange
的事件:
能过这个事件可以监听手Q是否被挂起(注意我这里说的是手Q是否被挂,不是说手Q的网页被挂起)。如果按照腾讯提供 API ,那么调用 qbrowserVisibilityChange
需要引用一个 js,如下:
<script type="text/javascript" src=";></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
可以使用以下方法来监听「微信手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(); }});