onbeforeunload 仅在用户主动交互产生“脏状态”后返回非undefined值才触发标准提示，但文案不可自定义；SPA路由跳转、移动端及部分浏览器中该事件常失效，须配合路由守卫与自动保存实现可靠防护。
onbeforeunload 事件触发条件是什么
浏览器只在页面存在「未保存的更改」时才允许弹出提示，且必须由用户主动交互（比如输入、点击）后才能激活该机制。单纯设置 onbeforeunload 属性或监听事件，但没触发「脏状态」，现代浏览器（Chrome、Edge、Firefox）会直接忽略，不显示任何提示。
常见错误现象：onbeforeunload 绑定后关闭标签页完全没反应；或者返回字符串却弹出默认提示（如“确定要离开此页面吗？”），而非自定义文案——这是因为浏览器已禁用自定义消息，只保留统一提示。
- 必须通过用户操作（如
input输入、textarea编辑、form提交前修改）设置一个标记（如isDirty = true） - 监听函数必须返回字符串（旧规范）或任意真值（新规范），但实际文案不会显示，仅作为“有拦截意图”的信号
- 不能调用
alert()、confirm()或发起网络请求，否则会被静默屏蔽
如何正确绑定 onbeforeunload 监听器
推荐用 addEventListener 方式，避免内联属性写法带来的作用域和移除困难问题。注意：该事件无法被 preventDefault() 阻止，只能靠返回值触发浏览器默认确认流程。
let isDirty = false;
// 用户开始编辑时标记
document.getElementById('my-form').addEventListener('input', () => {
isDirty = true;
});
// 离开前检查
function handleBeforeUnload(e) {
if (isDirty) {
// 返回任意非 undefined 值即可触发提示（字符串已无效）
e.returnValue = '您有未保存的内容';
return e.returnValue;
}
}
window.addEventListener('beforeunload', handleBeforeUnload);
// 保存成功后清除状态
document.getElementById('save-btn').addEventListener('click', () => {
isDirty = false;
});
- 返回
undefined或不返回值 → 浏览器不弹提示 - 返回空字符串、
null、false→ 同样无效，等价于未返回 - 返回非空字符串或
true→ 触发标准提示框（文案不可控） - 事件对象
e的returnValue属性是唯一被广泛支持的写法，不要只写return 'xxx'
为什么 onbeforeunload 在 SPA 路由跳转时失效
单页应用中，前端路由切换（如 Vue Router 的 router.push、React Router 的 useNavigate）不会触发 beforeunload，因为页面没刷新。需要配合路由守卫手动拦截。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Vue Router：使用
router.beforeEach+next(false)或弹出自定义模态框 - React Router v6+：用
useBlocker（需createBrowserRouter）监听导航意图 - 纯 JS 路由：在
pushState/replaceState前检查isDirty，失败则history.back() - 关键点：这类拦截无法复用
beforeunload逻辑，必须单独实现，且体验更可控（可带按钮、取消/保留草稿）
移动端和部分浏览器的兼容性陷阱
iOS Safari 和 Android Chrome 对 beforeunload 支持极弱：页面后台挂起、切到其他 App、甚至横竖屏切换都可能绕过该事件。PWA 场景下更不稳定。
- 不要依赖它做关键数据保护，仅作尽力提示
- 敏感操作（如表单提交前）应结合本地存储（
localStorage）自动保存草稿，降低丢失风险 - 测试时务必真机验证，模拟器和桌面 DevTools 会高估实际可用性
- 某些安卓厂商浏览器（如华为、小米）会直接禁用该事件，无任何降级提示
真正可靠的方案永远是「自动保存 + 显式提示」，而不是靠浏览器弹窗拦住用户。这个事件只是最后一道微弱防线，别把它当保险栓用。
