适配Edge Chromium的beforeunload事件同步AJAX请求替代方案咨询

前置说明 #

从Chrome 80版本开始，Chromium内核浏览器明确禁止在beforeunload、unload、pagehide等页面卸载生命周期事件中发起同步XMLHttpRequest请求，这是浏览器为了避免阻塞页面关闭、提升用户体验设定的硬限制，没有办法绕过该限制发起真正的同步请求，所有替代方案均为近似满足业务需求的实现。

可行替代方案 #

方案1：优先使用navigator.sendBeacon()（推荐，适合只需要保证请求送达后端的场景） #

navigator.sendBeacon()是浏览器专门为卸载场景上报数据设计的API，虽为异步实现，但浏览器会保证将请求加入后台发送队列，即使页面已经关闭，也会尽可能完成请求发送，不会被卸载流程中断，且不会阻塞页面关闭。
代码示例：

window.addEventListener('beforeunload', function() {
  const reportUrl = '@Url.Action("ActionName","ControllerName")';
  // sendBeacon支持直接传入FormData作为请求体
  const isSubmitted = navigator.sendBeacon(reportUrl, formData);
  if (!isSubmitted) {
    // 浏览器发送队列已满时，降级使用fetch + keepalive
    fetch(reportUrl, {
      method: 'POST',
      body: formData,
      keepalive: true,
      credentials: 'include' // 若请求需要携带Cookie可添加该配置
    })
  }
});

注意：该方案没有请求成功/失败的回调，若你需要依赖请求返回结果执行逻辑，该方案不适用。

方案2：拦截主动离开行为，提前执行请求（适合必须等待请求结果处理逻辑的场景） #

如果你的业务必须等待请求返回结果后才能允许页面离开，不能依赖卸载事件的异步机制，需要调整逻辑，提前拦截用户的主动离开操作，等请求执行完成后再触发页面离开：

• 拦截页面内所有跳转操作（a标签点击、提交按钮跳转等），先暂停跳转，执行你的AJAX请求，待success/error逻辑执行完成后再继续跳转
• 用户主动点击浏览器关闭页签、关闭浏览器的场景无法拦截，降级使用sendBeacon做兜底上报
  代码示例：

// 拦截页面内跳转
document.querySelectorAll('a[href]').forEach(link => {
  link.addEventListener('click', async function(e) {
    // 先阻止默认跳转行为
    e.preventDefault();
    const targetJumpUrl = this.href;
    try {
      // 异步执行你的业务请求，等待结果返回
      await $.ajax({
        url: '@Url.Action("ActionName","ControllerName")',
        data: formData,
        method: 'POST'
      });
      // 执行成功逻辑
      // ...
    } catch (err) {
      // 执行失败逻辑
      // ...
    } finally {
      // 逻辑执行完成后再跳转
      window.location.href = targetJumpUrl;
    }
  })
})

// 兜底：用户强制关闭浏览器/页签的场景，用sendBeacon上报
window.addEventListener('beforeunload', function() {
  navigator.sendBeacon('@Url.Action("ActionName","ControllerName")', formData);
});

方案3：调整业务逻辑，提前上报数据 #

如果业务允许，最稳妥的方案是不要将必须要确认送达的请求放在页面卸载阶段才发起，把上报逻辑提前到触发业务动作的时刻（比如用户点击保存、提交按钮时就上报，不要等到关页面才做），完全规避卸载场景的请求限制。

注意事项 #

• 不要尝试在beforeunload事件中用死循环阻塞页面关闭等待请求返回，该做法会被浏览器直接判定为恶意行为，请求依然会被中断，还会导致页面假死，影响用户体验。
• 页面卸载时页面上下文很快会被销毁，即使你用异步请求拿到了返回结果，注册的success/error回调大概率也没有执行机会，不要在卸载场景依赖回调逻辑。

内容的提问来源于stack exchange，提问作者Ambareesh