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

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

发布于 2019-02-15 阅读 429 次 Ajax Javascript
最近一直被一个问题困扰,就是开发统计代码的时候,将需要统计点击的dom大多都是a,然而我们知道,ajax的发送是需要一定的时间的,很可能请求还没发出去,页面就跳走了,导致统计数据缺失。 目前已知的解决方案: #####1.利用浏览器会等待资源加载完毕的特性,把请求伪装成一个图片,利用图片的src发送一个get请求: ```javascript (new Image).src = 'http1://example.com/s.gif'; ``` #####2.让后台返回一个1X1的小图片 #####3.同步请求,我们知道请求有两种方式异步和同步,通常我们用的都是异步 ```javascript 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.暴力死循环等待 ```javascript window.addEventListener('unload', function(event) { send(data); var now = +new Date; while(new Date - now >= 10) {} // 阻塞 10ms }); ``` #####5.在目标页面发送请求 通过window.name或者url等方式将要传递的数据发送到目标页面,前提是能够控制目标页面。 ######6.将这件事情交给浏览器来做 ```javascript window.addEventListener('unload', function(event) { navigator.sendBeacon('/collector', data); }); ``` can i use上面查到的支持情况还不错。