当前位置:首页 > 统计请求发送与页面跳转冲突 - a标标签跳转如何保证请求发出去

统计请求发送与页面跳转冲突 - a标标签跳转如何保证请求发出去

发布于 2019-02-15 阅读 200 次 Ajax Javascript

最近一直被一个问题困扰,就是开发统计代码的时候,将需要统计点击的dom大多都是a,然而我们知道,ajax的发送是需要一定的时间的,很可能请求还没发出去,页面就跳走了,导致统计数据缺失。

目前已知的解决方案:

1.利用浏览器会等待资源加载完毕的特性,把请求伪装成一个图片,利用图片的src发送一个get请求:
(new Image).src = 'http1://example.com/s.gif';
2.让后台返回一个1X1的小图片
3.同步请求,我们知道请求有两种方式异步和同步,通常我们用的都是异步
window.addEventListener('unload', function(event) {
  var xhr = new XMLHttpRequest(),
  xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  xhr.open('post', '/log', false); // 同步请求
  xhr.send(data);
});
4.暴力死循环等待
window.addEventListener('unload', function(event) {
  send(data);
  var now = +new Date;
  while(new Date - now >= 10) {} // 阻塞 10ms
});
5.在目标页面发送请求

通过window.name或者url等方式将要传递的数据发送到目标页面,前提是能够控制目标页面。

6.将这件事情交给浏览器来做
window.addEventListener('unload', function(event) {
  navigator.sendBeacon('/collector', data);
});

can i use上面查到的支持情况还不错。