如何区分浏览器关闭与标签页关闭事件

浏览器本身并没有原生事件能直接区分「整个浏览器关闭」和「单个标签页关闭」，但可以通过跨标签页通信的方式间接判断，下面是可行的实现方案：

核心思路 #

当用户关闭整个浏览器时，所有标签页都会被卸载；而关闭单个标签页时，其他标签页仍处于活跃状态。我们可以通过跨标签页通信来统计当前活跃的标签页数量，在beforeunload触发时根据数量判断是哪种关闭操作。

具体实现（使用BroadcastChannel） #

BroadcastChannel是浏览器提供的跨标签页通信API，能让同源的标签页之间互相发送消息，适合用来统计活跃标签页数量：

// 创建跨标签页通信通道
const tabChannel = new BroadcastChannel('browser-close-detector');
let activeTabCount = 1; // 当前标签页默认算1个

// 监听其他标签页的状态消息
tabChannel.onmessage = (event) => {
  if (event.data.type === 'tab-opened') {
    // 有新标签页打开，计数+1
    activeTabCount++;
  } else if (event.data.type === 'tab-closing') {
    // 有标签页要关闭，计数-1
    activeTabCount--;
  }
};

// 当前标签页加载完成后，通知其他标签页我已上线
tabChannel.postMessage({ type: 'tab-opened' });

window.addEventListener('beforeunload', () => {
  // 先通知其他标签页：当前标签页即将关闭
  tabChannel.postMessage({ type: 'tab-closing' });

  // 延迟一小段时间等待消息同步，避免计数判断出错
  setTimeout(() => {
    if (activeTabCount === 1) {
      // 只剩当前标签页，判定为浏览器关闭
      console.log('执行浏览器关闭专属代码');
      // 推荐用navigator.sendBeacon发送请求，避免页面卸载时请求被中断
      navigator.sendBeacon('/api/record-browser-close', JSON.stringify({
        userId: 'xxx',
        closeTime: new Date().toISOString()
      }));
    } else {
      // 还有其他活跃标签页，判定为单个标签页关闭，不执行代码
      console.log('标签页关闭，跳过执行');
    }
  }, 100);
});

注意事项 #

1. 请求发送方式：在beforeunload事件中执行异步操作时，一定要用navigator.sendBeacon，它是浏览器专门为页面卸载场景设计的API，能保证请求在页面卸载后仍能完成发送，普通的fetch或XMLHttpRequest大概率会被浏览器中断。
2. 隐私窗口限制：如果用户使用隐私模式打开多个窗口，不同隐私窗口的标签页之间无法通过BroadcastChannel通信，这种情况下判断可能不准确。
3. 多标签同时关闭：如果用户同时关闭多个标签页，计数判断可能出现误差，但这种场景占比极低，大部分日常使用场景下该方案有效。

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