h5 如何监听微信左上角关闭按钮

最新推荐文章于 2024-08-27 21:14:10 发布

echo 有趣的灵魂

最新推荐文章于 2024-08-27 21:14:10 发布

阅读量2.6k

点赞数 1

分类专栏： html 文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_69531418/article/details/129155838

版权

本文介绍了如何在H5页面中监听微信的左上角关闭按钮事件，针对Android和iOS设备的不同行为，使用visibilitychange和pagehide事件进行适配。在iOS设备上，由于xhr请求在页面关闭时可能失败，文章推荐使用navigator.sendBeacon方法来确保离页数据的异步发送。示例代码展示了具体的实现方式。

摘要由CSDN通过智能技术生成

最近项目里有个新的需求，在微信里打开的H5网页，要获取到用户退出页面的事件。经过对visibilitychange、 unload/pagehide 、onunload、popstate各种方法一阵测试，发现安卓里visibilitychange能监听到关闭事件。而iOS里使用pagehide能监听。

但是监听到关闭事件并不是终点，还要在用户退出时候向后台发送数据请求。这时，安卓里能正常发送ajax，iOS里却失效。原因是xhr请求是异步发送，很可能在它即将发送的时候，页面已经关闭，从而导致发送取消或者发送失败。

事实证明，iOS里还是无效。?然后，经过多方调阅资料，发现navigator.sendBeacon（URL，data）神器。url 就是上报地址，data 可以是 ArrayBufferView，Blob，DOMString 或 Formdata。sendBeacon发出的是异步请求，但是请求是作为浏览器任务执行的，与当前页面是脱钩的。那么在iOS端尝试运行，代码如下。

var u = nav