现代浏览器限制了 beforeunload 和 unload 事件的可用性，禁止弹窗、阻止同步请求，且不保证异步操作完成；推荐结合 beforeunload 做轻量提示，配合 navigator.sendBeacon() 发送可靠日志，并辅以 mouseout/visibilitychange 等事件增强检测覆盖。
现代浏览器限制了 `beforeunload` 和 `unload` 事件的可用性，禁止弹窗、阻止同步请求，且不保证异步操作完成；推荐结合 `beforeunload` 做轻量提示，配合 `navigator.sendbeacon()` 发送可靠日志，并辅以 `mouseout`/`visibilitychange` 等事件增强检测覆盖。
在 Web 开发中，「在用户离开页面前执行代码」是一个常见但极具挑战性的需求（例如：保存草稿、上报停留时长、清理 WebSocket 连接）。然而，由于安全与用户体验考量，现代浏览器（Chrome、Firefox、Safari）已大幅收紧相关 API 的能力：
- ✅
beforeunload仍被支持，但仅允许返回字符串用于显示默认提示框（如"您有未保存的更改"），禁止alert/confirm/prompt，且无法阻止跳转逻辑； - ❌
unload事件触发时页面已进入卸载阶段，JavaScript 执行被中断，fetch、XMLHttpRequest等网络请求几乎必然失败； - ❌ 同步
alert(1)或alert(2)在你的示例中会被浏览器直接忽略，甚至触发控制台警告（BeforeUnloadListener was blocked）。
✅ 正确做法：分场景选择可靠方案
1. 轻量级用户确认（仅限关键操作）
useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
e.preventDefault(); // 标准写法（部分浏览器仍需返回字符串）
e.returnValue = '确定要离开？您的更改可能丢失。'; // 兼容旧版
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, []);⚠️ 注意：该提示仅在用户主动导航（点击链接、输入 URL、关闭标签）时触发，不适用于刷新、后退、或单页应用（SPA）内部路由跳转（如 Next.js 的
router.push）。
2. 可靠数据上报：navigator.sendBeacon()
这是目前唯一被浏览器保障执行的异步上报机制——即使页面已卸载，浏览器仍会在后台发送一个 POST 请求：
const sendAnalytics = () => {
const data = JSON.stringify({
page: window.location.href,
duration: performance.now() - startTime
});
navigator.sendBeacon('/api/log', data); // 自动使用 POST，无需等待响应
};
// 绑定到 beforeunload（最佳实践）
window.addEventListener('beforeunload', sendAnalytics);
// 补充：监听页面隐藏（如切换标签、最小化窗口）
document.addEventListener('visibilitychange', () => {
if (document.hidden) sendAnalytics();
});3. 增强检测：mouseout + visibilitychange（辅助策略）
虽然 mouseout 并非“离开页面”的精确信号（鼠标移出窗口可能是悬停菜单、多屏操作等），但它可作为前置预警补充：
let isMouseOutside = false;
window.addEventListener('mouseout', (e) => {
if (e.relatedTarget === null) { // 鼠标真正移出视口
isMouseOutside = true;
// 可在此触发自动保存、暂停视频等轻量操作
localStorage.setItem('lastActiveTime', Date.now().toString());
}
});
// 结合页面可见性判断（更可靠）
document.addEventListener('visibilitychange', () => {
if (document.hidden && isMouseOutside) {
console.log('用户极可能已离开，执行兜底逻辑');
}
});4. Next.js / React 场景特别提示
- 使用
useEffect清理函数处理组件卸载（如取消定时器、关闭连接），但这不等价于“页面离开”； - 对于路由跳转（如
next/link或router.push），应监听router.events.on('routeChangeStart')并手动调用清理逻辑； -
beforeunload仍需挂载在window上（全局生命周期），不可仅依赖组件useEffect。
总结
| 场景 | 推荐方案 | 是否可靠 |
|---|---|---|
| 弹窗提醒用户确认离开 |
beforeunload 返回提示字符串 |
✅（仅标准提示） |
| 上报行为日志/分析数据 | navigator.sendBeacon() |
✅✅✅（浏览器强制保障） |
| 保存草稿/同步状态 |
localStorage + visibilitychange
|
✅（即时持久化） |
| 检测用户活跃度 |
mousemove/keydown + setTimeout 防抖 |
✅（主动心跳） |
alert/fetch/await 在离开时执行 |
❌ 完全不可行 | ❌ |
请始终遵循渐进增强原则：优先使用 sendBeacon 做关键上报，用 visibilitychange 和 pagehide 做补充，放弃对 unload 的依赖，并在 React/Next.js 中结合路由事件做精细化控制。
