onbeforeunload仅能触发浏览器原生只读确认框，无法阻止用户离开；现代浏览器已屏蔽自定义文案，且仅在用户有未保存变更时应动态启用并及时清除监听。

onbeforeunload 不能真正“防止”用户关闭页面，只能在刷新或关闭前弹出一个只读确认对话框——用户点“确定”就走，点“取消”才留下。这个行为由浏览器强制控制，无法绕过、美化或隐藏。

为什么onbeforeunload在现代浏览器里越来越难生效

Chrome 51+、Firefox、Edge 等主流浏览器已移除对自定义消息的支持：你返回的字符串会被忽略，只显示统一提示（如“离开此页面？更改可能不会被保存”）。Safari 更严格，仅在用户有未提交表单或调用 history.pushState() 后才触发该事件。

常见失效场景包括：

• 页面刚加载完立即绑定，没等 DOM 就绪
• 在非用户交互后（如定时器、Ajax 回调）动态启用，被浏览器判定为“非可信事件源”
• 返回值是空字符串、undefined 或 null，部分版本会直接跳过弹窗
• 使用 addEventListener("beforeunload", ...) 但没在回调中显式设置 e.returnValue

window.onbeforeunload vs

两者效果一致，但绑定位置影响可维护性与兼容性：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 写法简单，但混入 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 清理函数里执行清除，避免跨路由残留

漏掉清理会导致后续所有页面都触发提示——这是最常被忽略的线上问题。