请教, a 标签在本标签页面切换之前做埋点

2020-12-06 03:29:00 +08:00
 BUappend

在 a 标签在本页面跳转到本页面之前做埋点发送,发现 ajax 发送不出去,后来发现是 click 事件到跳转事件发生的时间间距特别小,零点几毫秒,所以 click 之后发送的 ajax 事件会被拦截抛弃掉,但是我写了个小 demo 测试下,突然发现 demo 里面的 ajax 居然能发送出去。所以我就有点迷了,到底是怎么回事呢???

<a href="https://www.baidu.com/" id="hand">点我跳转</a>

let hand = document.getElementById('hand')
hand.addEventListener('click', () => {
    ajax(url)
})
function ajax(url) {
     let xhr = new XMLHttpRequest()
     xhr.open("GET", url, true)

      return new Promise((res, rej) => {
          xhr.onload = function () {
              xhr.status < 300 ? res() : rej()
          }
          xhr.send()
       })
}
1748 次点击
所在节点    问与答
6 条回复
seki
2020-12-06 03:44:24 +08:00
页面跳转和发请求是两个并行的事情,谁先谁后都是有可能的

这种情况就需要找一个不被页面跳转销毁的地方暂存一下数据,比如如果跳转过去的是自家页面的话,用 session storage 之类的
BUappend
2020-12-06 10:01:56 +08:00
@seki 为啥我写的这个能发出去呢
Ptu2sha
2020-12-06 10:04:46 +08:00
看看人家访问系统怎么写的
des
2020-12-06 11:09:27 +08:00
BUappend
2020-12-06 11:33:08 +08:00
@des 感谢,但是这个 IE 和 safari 不支持呀
ivank
2020-12-06 13:42:45 +08:00
你代码里面做成了 promise 版本的肯定可以啊 请求发送成功后才跳转的 跳转肯定有延迟感,不过你可以了解下 sendBeacon

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/732557

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX