window.confirm 在 beforeunload 中完全无效，因现代浏览器强制屏蔽同步 ui 方法以防恶意弹窗；唯一可用位置是用户主动点击的按钮内，可自由调用 confirm 并执行异步操作。
不能用 window.confirm 拦截关闭事件。 它在 beforeunload 里会被浏览器静默屏蔽，点 × 或刷新时根本不会弹出来。
为什么 window.confirm 在 beforeunload 中完全无效
浏览器明确禁止在 beforeunload 执行期调用任何同步 UI 方法：alert()、prompt()、confirm() 全部被忽略。控制台通常会报 Blocked attempt to show a 'confirm' dialog。这不是兼容性问题，而是所有现代浏览器（Chrome 98+、Firefox 102+、Safari 16.4+）的强制策略。
原因很直接：防止恶意网站用反复弹窗锁死用户。所以哪怕你写了：
window.addEventListener('beforeunload', (e) => {
if (isDirty) {
if (confirm('真的要丢弃未保存内容？')) {
// 这段永远不会执行
saveDraft();
}
e.preventDefault();
}
});
结果是：什么也不弹，confirm() 返回 undefined，后续逻辑全跳过。
真正能用 confirm() 的唯一位置：主动触发的按钮
只有当用户**点击你写的按钮**（比如「关闭编辑器」「退出」），你才有完整控制权去调用 confirm() 并决定是否继续操作。
- 它不依赖
beforeunload，不受浏览器拦截限制 - 你可以自由执行异步保存（
await saveToServer()）、跳转、关闭窗口等动作 - 文案完全自定义，逻辑可嵌套（如“暂存并退出”“放弃并退出”“继续编辑”）
示例：
document.getElementById('exit-btn').addEventListener('click', async () => {
if (!isDirty) {
window.close();
return;
}
const choice = confirm('您有未保存的编辑内容，确定要放弃吗？');
if (choice) {
window.close();
}
});
beforeunload 的正确用法：只做最小化、无交互的提示
它的唯一合法用途，是告诉浏览器“这个页面确实有状态变化”，从而激活那个统一的、不可定制的系统确认框。关键点：
- 返回值必须是
undefined、null，或一个非空字符串（但字符串内容会被忽略） - 不能包含
fetch、setTimeout、confirm()等任何异步或阻塞行为 - 必须配合手动维护的脏状态（
isDirty），不能靠监听 DOM 变化自动推断 - 保存成功后务必清空：
window.onbeforeunload = null
标准写法：
let isDirty = false;
document.addEventListener('input', () => { isDirty = true; });
document.addEventListener('change', () => { isDirty = true; });
window.onbeforeunload = () => isDirty ? undefined : null;
最常被忽略的一点：移动端 Safari 和部分 Android WebView 中，beforeunload 可能完全不触发——你不能把它当作可靠防线。真正重要的数据，得在用户输入过程中就做防抖自动保存，而不是等到关页面才抢救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
