beforeunload 仅在用户主动导航且页面有未保存变更时触发，需设置 event.returnvalue 才可能弹窗；现代浏览器统一提示文案，且不支持异步设置或主动触发。
beforeunload 事件触发条件很苛刻
浏览器只在用户主动发起导航行为（比如点击链接、输入新 URL、关闭标签页）时才可能触发 beforeunload，且必须满足两个硬性条件：页面有未保存的变更、事件监听器里返回了字符串（或设置了 event.returnValue）。现代浏览器（Chrome 60+、Firefox 80+、Edge 79+）已屏蔽自定义提示文案，统一显示“离开此页面？更改可能不会被保存。”——你写什么字符串都无效。
- 如果页面没任何交互就直接绑定并返回字符串，多数浏览器会忽略该事件（不弹窗）
-
beforeunload无法通过 JS 主动触发（window.dispatchEvent(new Event('beforeunload'))无效） - 不能在异步回调（如
fetch().then()）里设置event.returnValue，因为事件早已结束
正确注册 beforeunload 并标记“脏状态”
关键不是“怎么弹窗”，而是“什么时候允许弹窗”。你需要在用户修改表单、编辑内容等操作后，显式标记页面为“已变更”，再绑定事件。否则浏览器认为无风险，直接放行。
- 用一个布尔变量（如
isDirty）跟踪状态，初始设为false - 在
input、change、submit等事件中设isDirty = true - 在成功保存后重置
isDirty = false - 监听
beforeunload时，仅当isDirty为真才设置event.returnValue
let isDirty = false;
document.addEventListener('input', () => { isDirty = true; });
document.addEventListener('change', () => { isDirty = true; });
window.addEventListener('beforeunload', (e) => {
if (isDirty) {
e.preventDefault();
e.returnValue = '确认要离开？未保存的内容将丢失。'; // 这行只是兼容旧浏览器
}
});
常见失效场景和绕不过去的限制
很多开发者以为加了监听就万事大吉，结果测试时完全不弹窗——大概率踩了以下坑：
- 在 Vue/React 等框架中，用
useEffect或mounted注册但没清理，导致多次绑定，反而被浏览器拒绝（部分版本会静默忽略重复 handler） - 在单页应用（SPA）中，路由跳转（如
router.push）默认不触发beforeunload，需手动在导航守卫里处理（Vue Router 的beforeEach、React Router 的useBlocker） - 调用
history.pushState()或replaceState()不会触发该事件——它只响应用户主动离开，不响应 JS 控制的导航 - 移动端 Safari 对
beforeunload支持极差，基本不触发，别依赖它做关键保护
替代方案比死磕 beforeunload 更可靠
如果你真正需要的是“防止误关/误跳导致数据丢失”，beforeunload 只是最后一道弱防线。更务实的做法是：
- 对长文本编辑器（如
contenteditable或富文本框）启用本地缓存（localStorage），每几秒自动保存草稿 - 表单提交前校验必填字段，失败时不跳转，并聚焦错误项——这比弹窗更友好
- 使用框架提供的导航守卫（如 Vue Router 的
navigation-guards、React Router v6.4+ 的useBlocker），它们能拦截 JS 导航并给出可控 UI 提示 - 服务端记录用户最后操作时间，配合心跳检测，前端可主动提示“您有未提交的修改”而非强制阻断
真正难的不是让浏览器弹窗，而是在各种跳转路径、刷新、关闭、后台切换下保持状态一致——beforeunload 天生能力有限，别把它当主干逻辑用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
