如何在Javascript中可靠捕获浏览器标签页关闭事件？

我完全懂你这种卡壳的感觉——页面卸载时确保API请求能成功发出去确实坑不少，你之前的onbeforeunload方案不稳定，本质是浏览器在卸载流程里会快速终止未完成的请求，根本不给普通异步/同步请求留足够时间。

下面给你两个经过实践验证的可靠方案，核心思路是利用浏览器专门为这类场景设计的API，保证请求能被后台处理：

方案一：使用navigator.sendBeacon（推荐） #

这是W3C专门为页面卸载时发送数据设计的API，浏览器会把请求加入后台队列，即使页面已经开始卸载，也会尽量保证请求发送完成，而且不会阻塞页面关闭/跳转。

window.addEventListener('beforeunload', (event) => {
  // 准备要发送的数据，根据你的API要求调整格式
  const payload = new URLSearchParams({
    userId: '123',
    action: 'tab-closed'
  });

  // 检查浏览器是否支持sendBeacon
  if (navigator.sendBeacon) {
    // 第一个参数是API地址，第二个是要发送的数据
    navigator.sendBeacon('/your-close-api', payload);
  } else {
    // 降级到fetch keepalive（针对旧浏览器）
    fetch('/your-close-api', {
      method: 'POST',
      body: payload,
      keepalive: true,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });
  }
});

关于sendBeacon的注意点： #

• 只能发送POST请求，支持的数据格式：FormData、Blob、String、URLSearchParams
• 无法获取请求的响应结果（页面都要关了，一般也不需要）
• 兼容性极佳：Chrome、Firefox、Safari 11.1+都支持，IE除外（现在基本不用考虑IE了）
• 请求大小有限制（一般是64KB左右），如果你的数据超过这个限制，建议用方案二

方案二：使用fetch的keepalive选项 #

如果你的API需要自定义请求头、或者数据量较大，可以用fetch搭配keepalive: true，它同样能让浏览器在后台完成请求。

window.addEventListener('beforeunload', async (event) => {
  const payload = JSON.stringify({
    userId: '123',
    action: 'tab-closed'
  });

  try {
    await fetch('/your-close-api', {
      method: 'POST',
      body: payload,
      keepalive: true,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token' // 自定义头也支持
      }
    });
  } catch (err) {
    // 这里的错误捕获意义不大，因为页面卸载时控制台可能看不到日志
    console.error('发送关闭请求失败:', err);
  }
});

额外提醒： #

• 不要在beforeunload回调里做任何耗时操作，哪怕是异步的，浏览器还是可能中断
• 无法100%区分“关闭标签”和“刷新页面/跳转链接”，因为浏览器没有提供原生事件来做这个区分。如果需要区分，只能通过一些hack手段（比如监听用户的鼠标位置判断是否点击关闭按钮，但准确率不是100%）
• 有些浏览器会限制频繁的卸载请求（比如用户快速打开关闭标签），这是浏览器的安全机制，无法绕过

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