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

最近项目里有个新的需求，在微信里打开的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 = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let that = this
        if (isAndroid) { //安卓
            if (window.addEventListener) {
                document.addEventListener("visibilitychange", function () { //部分手机可以获取到
                    if (document.hidden) {
                        that.addBrowseLog();
                    }
                })
            } else if (window.attachEvent) {
                // 主要是为了兼容老的IE
                window.attachEvent('onpagehide', function () {
                    that.addBrowseLog();
                })
            } else {
                window.onbeforeunload = function () {
                    that.addBrowseLog();
                }
            }
        } else { //苹果
            window.addEventListener("pagehide", function (e) {
                that.addBrowseLog();

            }, false);
        }


     addBrowseLog() {
 
        let data = {value:"测试"}
        let url = ''
        let blob = new Blob([JSON.stringify(data)], {
            type: 'application/json; charset=UTF-8',
        });
        navigator.sendBeacon(url, blob);
    }

关于navigator.sendBeacon（https://zhuanlan.zhihu.com/p/381796039）