如何区分浏览器/标签页关闭与刷新事件？

• 结合beforeunload、unload事件与sendBeacon请求
  刷新页面时，浏览器会先触发beforeunload，随后重新加载页面；而关闭标签页/浏览器时，不会有后续的页面加载。可以通过标记状态来区分：

  let isRefreshing = false;
  
  // 页面即将卸载前触发，刷新和关闭都会走这里
  window.addEventListener('beforeunload', () => {
    isRefreshing = true;
    // 刷新时新页面会覆盖当前上下文，这个定时器不会执行；关闭则会执行
    setTimeout(() => {
      isRefreshing = false;
    }, 500);
  });
  
  // 页面实际卸载时触发
  window.addEventListener('unload', () => {
    if (!isRefreshing) {
      // 用sendBeacon发送登出请求，不会阻塞页面卸载
      navigator.sendBeacon('/api/logout', JSON.stringify({ userId: '当前用户ID' }));
    }
  });
  

  重点用navigator.sendBeacon()，它是浏览器专门为页面卸载场景设计的异步请求，能最大程度保证请求被发送，且不会阻塞页面关闭/刷新流程。

• 页面可见性API辅助判断
  刷新页面时，页面会短暂变为不可见后重新恢复可见；关闭标签页则只会变为不可见。结合这个特性可以辅助判断：

  let isPageVisible = true;
  let isRefreshing = false;
  
  document.addEventListener('visibilitychange', () => {
    isPageVisible = !isPageVisible;
    // 页面重新可见，说明是刷新操作
    if (isPageVisible) {
      isRefreshing = true;
    }
  });
  
  window.addEventListener('unload', () => {
    if (!isRefreshing) {
      navigator.sendBeacon('/api/logout', JSON.stringify({ userId: '当前用户ID' }));
    }
  });
  

• 兜底与补充逻辑

  • 任何前端方案都无法100%覆盖所有场景（比如浏览器崩溃、强制关闭），必须配合后端的会话超时机制，比如设置会话有效期，超时后自动登出。
  • 保留你之前的标签页计数逻辑：当标签页数量大于1时，关闭当前标签页不触发登出；只有数量为1时，才用上述方法判断是否为浏览器/标签页关闭操作。

内容的提问来源于stack exchange，提问作者Suman K C