监控微信H5的页面关闭按钮并埋点,移动端js这样实现
最近项目里有个新的需求,在微信里打开的H5网页,要获取到用户退出页面的事件。经过对visibilitychange、 unload/pagehide 、onunload、popstate各种方法一阵测试,发现安卓里visibilitychange能监听到关闭事件。而iOS里使用pagehide能监听。
但是监听到关闭事件并不是终点,还要在用户退出时候向后台发送数据请求。这时,安卓里能正常发送ajax,iOS里却失效。原因是xhr请求是异步发送,很可能在它即将发送的时候,页面已经关闭,从而导致发送取消或者发送失败。
那么把ajax请求改成同步呢?
```javascript
$.ajaxSettings.async = false;
```
事实证明,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终端
var formurl = 'http://www.moonstorm.fun:8090/financial-atlas-1.0.0-SNAPSHOT/upload';
if (isAndroid) { //安卓
if (window.addEventListener) {
document.addEventListener("visibilitychange", function () { //部分手机可以获取到
// do something
if (document.hidden) {
console.log(localStorage.getItem('isOut6'));
sendAjax("getSysTimes", "get", function () { //发送请求
console.log(result)
})
}
})
} else if (window.attachEvent) {
// 主要是为了兼容老的IE
window.attachEvent('onpagehide', function () {
localStorage.setItem('isOut5', false)
console.log(localStorage.getItem('isOut5'));
})
} else {
window.onbeforeunload = function () {
localStorage.setItem('isOut5', false)
console.log(localStorage.getItem('isOut5'));
}
}
}
else { //苹果
window.addEventListener("pagehide", function (e) {
$.ajaxSettings.async = false; //无效
var formData2 = new FormData();
formData2.append("name", "呵呵");
navigator.sendBeacon(formurl, formData2);//formurl写后台接受数据地址
}, false);
}
```
经测试,在微信的H5页面中,iOS里使用navigator.sendBeacon,可以满足监控页面关闭需求,监控并向后台发送数据。在安卓中正常使用ajax即可。