监听页面卸载事件应使用 beforeunload，而非 unload；它仅在用户主动导航时触发原生不可定制弹窗，且需先有用户交互才能生效，否则会被浏览器静默屏蔽。
监听页面卸载事件用 beforeunload，不是 unload
浏览器只允许在用户即将离开当前页面（刷新、关闭标签、输入新 URL、点击链接等）时，通过 beforeunload 触发一个简陋的原生确认弹窗。这个弹窗无法自定义样式、按钮文字或图标，且现代浏览器（Chrome 88+、Firefox 97+、Edge 105+）已移除对自定义消息的支持——你设的 return '确定要离开？' 会被忽略，只显示统一提示（如“此页面正在询问您是否要离开……”）。
常见错误是监听 unload，但它不阻塞跳转，也无法弹窗，纯属无效操作；还有人试图用 visibilitychange 或 pagehide 挽留，这些事件根本不能触发任何用户交互。
- 只对用户主动触发的导航生效（手动关闭、刷新、前进后退、地址栏跳转），
location.href = 'xxx'或history.pushState不会触发 - 必须在用户有交互（如点击、输入）之后才注册监听，否则 Chrome 会静默忽略（称作“未激活上下文”）
- 监听函数内返回非空字符串（如
return '1'）是触发弹窗的唯一方式，但该字符串内容不会显示
如何避免被浏览器静默屏蔽
Chrome 要求页面至少有一次用户手势（click、keydown、focus 等）后，才能启用 beforeunload 的阻断能力。这意味着：页面一加载就加监听，大概率失效。
典型做法是监听首次用户交互，再绑定事件：
let hasUserInteraction = false;
['click', 'keydown', 'scroll', 'focus'].forEach(event => {
document.addEventListener(event, () => {
if (!hasUserInteraction) {
hasUserInteraction = true;
window.addEventListener('beforeunload', handleBeforeUnload);
}
}, { once: true });
});
function handleBeforeUnload(e) {
e.preventDefault();
return '数据可能未保存'; // 仅用于触发，不显示
}
-
{ once: true }防止重复绑定；多个事件中任一触发即启用 - 不要在
DOMContentLoaded或load里直接绑定beforeunload - 移动端 Safari 对
beforeunload支持极差，基本不弹，别依赖它做关键逻辑
为什么不能用 confirm() 或自定义模态框
浏览器明确禁止在 beforeunload 处理函数中调用 alert()、confirm()、prompt() 或任何 DOM 操作（如 document.body.innerHTML = '...'）。这么做不仅无效，还会导致控制台报错：Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had user interaction。
- 所有 DOM 渲染、
fetch、setTimeout在该回调中都不可靠，部分浏览器会直接跳过执行 - 想“挽留”，只能靠原生弹窗；想“提示”，应在用户操作前（如表单失焦、离开按钮点击）主动提醒，而不是等临门一脚
- 真正需要防误关的场景（如编辑器），建议用
blur+input监听判断是否修改，提前置灰导航入口或加视觉提示
替代方案比硬扛 beforeunload 更可靠
如果你的目标是“防止用户丢失未保存内容”，beforeunload 是最后手段，且成功率低。更可控的做法是：把“挽留”动作前移到用户行为链中。
- 监听表单控件变化（
input、change、textarea键入），设置isDirty = true - 在用户点击「返回」、「首页」等导航按钮前，先
confirm()一次，再跳转 - 配合
localStorage自动存草稿，即使用户真关了，下次打开也能恢复 - 服务端记录编辑状态（如 WebSocket 心跳 + 最后编辑时间），前端定期上报，退出前校验并提示
原生 beforeunload 弹窗只是个弱信号，真正需要保护的数据，得靠前置判断和自动兜底，而不是指望那个连“取消”按钮都写不了的弹窗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
