V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
BUappend
V2EX  ›  问与答

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

  •  
  •   BUappend · 2020-12-06 03:29:00 +08:00 · 1740 次点击
    这是一个创建于 1440 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 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()
           })
    }
    
    第 1 条附言  ·  2020-12-06 13:48:16 +08:00
    忘了一个事,是火狐才被 abort,chrome 是可以的
    6 条回复    2020-12-06 13:42:45 +08:00
    seki
        1
    seki  
       2020-12-06 03:44:24 +08:00
    页面跳转和发请求是两个并行的事情,谁先谁后都是有可能的

    这种情况就需要找一个不被页面跳转销毁的地方暂存一下数据,比如如果跳转过去的是自家页面的话,用 session storage 之类的
    BUappend
        2
    BUappend  
    OP
       2020-12-06 10:01:56 +08:00 via Android
    @seki 为啥我写的这个能发出去呢
    Ptu2sha
        3
    Ptu2sha  
       2020-12-06 10:04:46 +08:00
    看看人家访问系统怎么写的
    des
        4
    des  
       2020-12-06 11:09:27 +08:00
    BUappend
        5
    BUappend  
    OP
       2020-12-06 11:33:08 +08:00
    @des 感谢,但是这个 IE 和 safari 不支持呀
    ivank
        6
    ivank  
       2020-12-06 13:42:45 +08:00 via iPhone
    你代码里面做成了 promise 版本的肯定可以啊 请求发送成功后才跳转的 跳转肯定有延迟感,不过你可以了解下 sendBeacon
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3397 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:53 · PVG 12:53 · LAX 20:53 · JFK 23:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.