onbeforeunload仅能触发浏览器原生只读确认框，无法阻止用户离开；现代浏览器已屏蔽自定义文案，且仅在用户有未保存变更时应动态启用并及时清除监听。
onbeforeunload 不能真正“防止”用户关闭页面，只能在刷新或关闭前弹出一个只读确认对话框——用户点“确定”就走，点“取消”才留下。这个行为由浏览器强制控制，无法绕过、美化或隐藏。
为什么onbeforeunload在现代浏览器里越来越难生效
Chrome 51+、Firefox、Edge 等主流浏览器已移除对自定义消息的支持：你返回的字符串会被忽略，只显示统一提示（如“离开此页面？更改可能不会被保存”）。Safari 更严格，仅在用户有未提交表单或调用 history.pushState() 后才触发该事件。
常见失效场景包括：
- 页面刚加载完立即绑定，没等 DOM 就绪
- 在非用户交互后（如定时器、Ajax 回调）动态启用，被浏览器判定为“非可信事件源”
- 返回值是空字符串、
undefined或null，部分版本会直接跳过弹窗 - 使用
addEventListener("beforeunload", ...)但没在回调中显式设置e.returnValue
window.onbeforeunload vs
两者效果一致，但绑定位置影响可维护性与兼容性：
-
写法简单，但混入 HTML，不利于模块化和 SSR 场景 -
window.onbeforeunload = function() { return "请保存后再离开"; };更推荐，便于条件启用/销毁（比如单页应用中只在编辑页挂载） - 使用
addEventListener("beforeunload", handler)时，必须写e.preventDefault()+e.returnValue = "xxx"才兼容旧版 IE，但现代浏览器只需返回字符串即可
如何安全启用并及时清理
关键不是“怎么弹”，而是“什么时候该弹、什么时候不该弹”。真实业务中，你应该只在用户有未保存变更时才激活提示：
- 监听表单输入、富文本编辑器内容变化，设一个
isDirty标志位 - 进入编辑页时绑定：
window.onbeforeunload = isDirty ? () => "数据未保存，确定离开？" : null; - 提交成功或手动点击“放弃修改”后，立刻清除：
window.onbeforeunload = null; - Vue/React 项目中，在组件
unmounted或useEffect清理函数里执行清除，避免跨路由残留
漏掉清理会导致后续所有页面都触发提示——这是最常被忽略的线上问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
