博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
监听微信手Q的挂起事件(visibilitychange)
阅读量:6173 次
发布时间:2019-06-21

本文共 2086 字,大约阅读时间需要 6 分钟。

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

,也没有一个对应的事件可以监听微信是否被挂起,一句话无解。好消息是 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();     }});

转载地址:http://aetba.baihongyu.com/

你可能感兴趣的文章
node.js获取参数的常用方法
查看>>
jquery 的 change() 方法的使用
查看>>
本地计算机上的XXX服务启动后又停止了
查看>>
<s:iterator>标签迭代数据不显示
查看>>
判断 SQLServer 触发器类型,支持多行
查看>>
SQL表连接查询(inner join、full join、left join、right join)
查看>>
阿里云OTS(开放结构化数据服务)可视化管理工具的设计和功能介绍
查看>>
Github创建分支
查看>>
转换PHP脚本成为windows的执行程序
查看>>
Python组织文件 实践:将带有美国风格日期的文件改名为欧洲风格日期
查看>>
FATAL ERROR: Could not find ./bin/my_print_defaults 解决方法
查看>>
Java实验四和实验五
查看>>
树讲解(7)——没有上司的舞会
查看>>
学习:jar 的创建,执行,引用;在 cmd 下实践
查看>>
模板方法模式-Template Method
查看>>
java格式化输出方法
查看>>
在windows下搭建网站开发环境apache+php+mysql模式
查看>>
软件开发流程思考及建议
查看>>
liunx基础入门了解
查看>>
Core BlueTooth官方文档翻译
查看>>