BeforeUnload 事件可在用户离开页面前弹出浏览器原生确认框，但无法自定义文案、不支持异步操作，需通过返回非空字符串触发，且应仅在存在未保存变更（如 isFormDirty 为 true）时启用，并配合自动保存与显式提示提升体验。
BeforeUnload 事件可用于在用户尝试关闭页面或跳转离开前，弹出浏览器原生确认对话框，提醒用户保存未提交的数据。但需注意：该事件不能自定义提示文案（现代浏览器统一显示“离开此页面？更改可能不会被保存”类提示），也不能执行异步操作（如发送 AJAX 请求）。
触发 BeforeUnload 的基本条件
只有当页面存在“未保存的变更”时，才应启用该事件。否则会干扰正常浏览体验。常见做法是设置一个布尔标志（如 isFormDirty），在用户输入、修改表单字段时设为 true；提交成功或手动点击“保存”后重置为 false。
- 监听表单元素的 input、change、select 等事件来标记脏状态
- 避免监听 keydown 或 blur 等高频/误触事件
- 若使用框架（如 React/Vue），应在响应式数据更新时同步更新脏状态
正确绑定与移除事件监听器
BeforeUnload 是全局事件，绑定在 window 上。必须返回非空字符串（旧规范）或调用 event.preventDefault()（新规范）才能触发确认弹窗——但现代浏览器仅识别返回字符串的方式（尽管控制台可能警告已弃用）。
- 添加监听：
window.addEventListener('beforeunload', handleBeforeUnload) - 处理函数中需 return '请保存您的更改'（任意非空字符串即可）
- 提交成功后务必调用
window.removeEventListener('beforeunload', handleBeforeUnload)，避免重复提示 - 不要在函数内执行 fetch/AJAX，因页面即将卸载，请求极大概率被中断
更可靠的替代方案：自动保存 + 显式提示
BeforeUnload 体验差、可控性低，建议优先采用“后台自动保存 + 页面顶部轻提示”的组合策略：
- 用户输入时，定时（如 30 秒）或节流地将草稿存入 localStorage 或通过 fetch 提交到服务端
- 页面加载时检查 localStorage 中是否有未提交的草稿，自动恢复并显示“已恢复上次编辑内容”提示
- 若检测到有未保存变更，且用户点击了关闭标签页按钮，再启用 BeforeUnload 作为最后防线
- 对关键操作（如删除、提交）提供二次确认（Modal），比依赖 beforeunload 更明确、更友好
兼容性与注意事项
所有主流浏览器均支持 BeforeUnload，但行为略有差异：
- Chrome 98+ 和 Edge 98+ 已屏蔽非用户交互触发的 BeforeUnload（如脚本直接调用 window.close()）
- 移动端 Safari 对该事件支持有限，部分场景下不触发
- SPA 应用中，路由跳转（如 Vue Router / React Router）默认不触发 BeforeUnload，需在 router.beforeEach 中手动判断并提示
- 测试时注意：自动化工具（如 Puppeteer）默认禁用 beforeunload 弹窗，需显式启用
