H5頁面可見性改變(visibility change)事件

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(); } });