如何在安卓Chrome移动浏览器中检测标签页关闭事件？

我太懂这个坑了——安卓Chrome对beforeunload和onunload的触发限制特别严格，尤其是用户直接关闭标签页的时候，这俩事件经常“掉链子”。好在我们有更可靠的方案来实现关闭标签页时发送分析数据的需求，下面给你详细说：

方案1：用visibilitychange + navigator.sendBeacon()（最推荐） #

visibilitychange事件会在页面隐藏时触发（包括关闭标签、切换到其他APP、手机锁屏等场景），配合navigator.sendBeacon()可以保证请求在页面卸载后仍能被浏览器后台完成，不会被中断。

代码示例：

window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 构造你的分析数据
    const analyticsData = JSON.stringify({
      event: 'tab_closed',
      timestamp: Date.now(),
      // 可以添加更多自定义字段，比如用户ID、页面路径等
    });
    
    // 发送请求，第一个参数是你的分析接口地址
    navigator.sendBeacon('/your-analytics-api', analyticsData);
  }
});

方案2：结合pagehide事件做兼容 #

pagehide事件专门针对页面即将被卸载的场景，兼容性也不错，同样搭配sendBeacon使用，还能过滤掉页面被缓存的情况：

window.addEventListener('pagehide', (event) => {
  // 判断页面是否被存入往返缓存（bfcache），如果是则不发送关闭事件
  if (event.persisted) return;
  
  const analyticsData = JSON.stringify({
    event: 'tab_closed',
    timestamp: Date.now()
  });
  
  navigator.sendBeacon('/your-analytics-api', analyticsData);
});

关键注意事项 #

• 绝对不要用同步的XMLHttpRequest或者设置了同步模式的请求，页面卸载时浏览器会直接中断这类请求，导致数据发送失败。
• 测试时一定要用真实的安卓设备操作关闭标签页，不要用桌面浏览器的“模拟移动设备”或者刷新页面来测试——刷新页面的行为和关闭标签的触发逻辑完全不同。
• 如果你的分析数据比较大，sendBeacon的payload有大小限制（一般是64KB左右），如果超过这个限制，可以考虑把数据拆分或者调整后台接收方式。

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