html设置可见性的代码,H5页面可见性改变(visibility change)事件(示例代码)

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

document.addEventListener("visibilitychange", () => {

if(document.hidden) {

// 页面被挂起

}

else {

// 页面呼出

}

});

但是呢，手Q不会触发这个事件！因为手Q的网页永远都不会被挂起，所以visibilitychange事件不会被触发。

手Q内的网页永远不会被挂起？

是的。可以在手Q中运行以下代码：

setInterval(() => document.write(new Date().getTime() + "\
"), 1000);

按下HOME键等待十几秒后再呼起手Q，你会发现在页面输出的时间并没有中断，而是很平稳地输出。

能过这个事件可以监听手Q是否被挂起(注意我这里说的是手Q是否被挂，不是说手Q的网页被挂起)。如果按照腾讯提供 API ，那么调用 qbrowserVisibilityChange 需要引用一个 js，如下：

// 手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();

}

});