本文介绍一种结合 visibilitychange 与 beforeunload 事件的可靠方案，通过检测页面可见性状态来区分标签页关闭与页面刷新，从而精准触发清理逻辑（如清除 sessionStorage、通知其他标签页、调用后端接口等）。
本文介绍一种结合 `visibilitychange` 与 `beforeunload` 事件的可靠方案，通过检测页面可见性状态来区分标签页关闭与页面刷新，从而精准触发清理逻辑（如清除 sessionstorage、通知其他标签页、调用后端接口等）。
在 Web 开发中，常需在用户离开当前标签页或关闭浏览器窗口时执行清理操作（例如：注销会话、更新在线状态、释放资源）。但直接监听 beforeunload 事件存在一个关键缺陷——它会在页面刷新、导航跳转、标签页关闭、窗口关闭等多种场景下统一触发，无法原生区分“关闭”与“刷新”。
现代浏览器（Chrome、Edge、Firefox、Safari）均不提供 beforeunload 的事件来源标识（如 event.reason === 'close'），因此必须借助辅助信号进行推断。目前最稳定、兼容性良好的实践是：利用 document.visibilityState 的变化作为“刷新前奏”的代理指标。
✅ 核心原理
- 页面刷新前，浏览器会先将当前标签页设为 hidden（触发 visibilitychange 事件），随后才触发 beforeunload；
- 而直接关闭标签页或窗口时，visibilitychange 通常不会被触发（或极短延迟内不可靠），因此 isTabHidden 标志保持 false；
- 由此，我们在 beforeunload 中检查该标志：若为 true，大概率是刷新/导航，跳过执行；若为 false，则视为可信的关闭行为。
? 实现代码（优化版）
let isTabHidden = false;
// 监听页面可见性变化（刷新前必触发）
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
isTabHidden = true;
}
});
// 在 beforeunload 中做最终判断
window.addEventListener('beforeunload', (event) => {
// ✅ 关键过滤：仅当页面未进入 hidden 状态时才执行关闭逻辑
if (isTabHidden) {
return;
}
// 执行真正的关闭清理逻辑
sessionStorage.removeItem(tabKey);
const activeTabs = JSON.parse(localStorage.getItem(tabKey)) || [];
const updatedTabs = activeTabs.filter(id => id !== tabId);
if (updatedTabs.length === 0) {
// 全部标签已关闭，上报用户离线状态
const id = events.getIdentifier();
const url = `${API_URL}chat/change-status?url=${FIREBASE_FUNCTIONS_URL}&id=${id}&status=${Visitor_status.inactive}&chat_status=${chat_status.no_action}`;
// 使用 keepalive 确保请求在页面卸载后仍能发出（适用于轻量级状态上报）
fetch(url, { keepalive: true })
.catch(console.warn); // 静默失败，避免阻塞卸载
}
});⚠️ 注意事项与最佳实践
- keepalive: true 是必需的：fetch 在 beforeunload 中必须启用 keepalive，否则请求会被浏览器终止；
- 避免 event.preventDefault()（除非必要）：你原始代码中调用了 event.preventDefault()，这会强制弹出浏览器原生确认对话框（且现代 Chrome 已限制其自定义文本）。若仅为后台清理，请移除该行；仅当需用户确认离开时才保留；
- visibilitychange 并非 100% 可靠：某些极端场景（如快速双击关闭、系统休眠唤醒）可能导致时序异常，建议将核心业务逻辑设计为幂等（例如后端校验 tab ID 是否真实存在再更新状态）；
- 不要依赖 pagehide 替代：pagehide 在刷新和关闭时均会触发，且 event.persisted 仅反映 bfcache 状态，无法区分关闭与刷新；
- 服务端兜底很重要：前端检测存在局限，务必配合服务端心跳/超时机制（如 WebSocket 心跳断连检测、定时任务清理陈旧 tab 记录），确保状态最终一致。
通过这一组合策略，你能在绝大多数主流浏览器中实现高精度的“仅关闭触发”，显著提升多标签协同场景下的用户体验与数据可靠性。
