现代浏览器屏蔽onbeforeunload自定义文案是出于安全考量，防止恶意网站伪造系统警告诱导用户误操作；仅显示统一提示（如“确定要离开此页面吗？”），且仅在页面存在真实变更（如表单修改）时才触发默认确认框。
window.onbeforeunload 能触发关闭/刷新前的确认弹窗，但现代浏览器已限制其行为：无法自定义文案，且仅在页面有“真实变更”时才生效——直接赋值字符串已无效，必须返回 undefined 或 null 才可能激活默认提示。
为什么 window.onbeforeunload 不再显示你写的文字？
从 Chrome 51、Firefox 44 起，所有主流浏览器屏蔽了 window.onbeforeunload 的自定义消息。你写 return "离开会丢失数据！"，用户看到的只是统一提示（如“确定要离开此页面吗？”），且该提示只在浏览器判定“页面状态已改变”时才出现。
- 单纯绑定事件不触发弹窗，必须配合状态标记（如表单修改）
- 返回非
undefined/null值（如字符串、数字）在新版 Chrome 中会被忽略，甚至导致事件失效 - 调用
history.pushState或修改location.hash通常不被视为“变更”，需手动管理脏状态
如何正确标记“数据已修改”并触发确认？
核心是维护一个布尔标志位，在用户编辑输入框、切换表单字段等操作后设为 true；保存成功后重置为 false。事件处理器只检查该标志，返回 undefined 即可激活默认提示。
let isDirty = false;
// 监听表单变化（示例：监听所有 input、textarea、select）
document.addEventListener('input', () => {
isDirty = true;
});
document.addEventListener('change', () => {
isDirty = true;
});
// 保存后重置
function onSaveSuccess() {
isDirty = false;
}
window.onbeforeunload = function () {
if (isDirty) {
return undefined; // 注意：不是 return "xxx"
}
};
- 不要用
onbeforeunload检查 DOM 是否变化，而应主动维护isDirty - 避免在
onbeforeunload中执行异步操作（如fetch），它不会等待 Promise - 如果使用 React/Vue，确保
isDirty是全局可访问变量，或通过 ref / store 统一管理
哪些操作不会触发 onbeforeunload？怎么补救？
点击 <a href="/other"></a>、调用 window.location.href = "..."、history.replaceState 等导航行为，部分浏览器（尤其是 Safari）可能跳过 onbeforeunload，尤其当目标是同域新页面时。
- 对关键链接添加
onclick阻断：检查isDirty，若为true则event.preventDefault()并手动confirm()（注意：这是唯一能自定义文案的地方） - 对
router.push（Vue Router）、useNavigate（React Router）等封装导航，统一前置校验 - 避免依赖
onbeforeunload做唯一防护——服务端仍需处理未保存提交、防重复提交等逻辑
真正容易被忽略的是：用户可能在弹出确认框后点“取消”，但页面状态仍是 isDirty = true，下次再关页还会触发。别忘了在 onunload 或 pagehide 中清理副作用（比如取消未完成的上传请求），但不要指望它们能可靠拦截离开动作。
