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();
}
});
H5頁面可見性改變(visibility change)事件