如何处理window.onbeforeunload弹窗的取消与重载操作？

首先明确：你无法通过beforeunload事件直接获取用户是确认页面卸载还是取消操作，浏览器出于安全和隐私限制，没有提供这类API，你示例代码里的e.cancelled属性根本不存在，这也是你查MDN找不到相关说明的原因。

为什么拿不到用户选择？ #

当你给window.onbeforeunload绑定函数并返回非空字符串（或调用event.preventDefault()）时，浏览器会弹出确认对话框，但这个对话框的交互结果不会暴露给JavaScript代码——也就是说，浏览器不会告诉你用户点了"留在页面"还是"离开页面"。

可行的替代方案 #

1. 监听用户确认离开的操作

如果需要在用户确实离开页面后执行操作，可以用unload事件，但要注意：这个事件触发时页面即将被销毁，所有异步操作（比如接口请求、定时器）几乎都会被浏览器终止，只能执行同步的清理逻辑。

2. 间接判断用户取消卸载

可以结合visibilitychange事件来间接推断：当用户取消卸载时，页面会从隐藏状态恢复为可见，结合beforeunload的触发记录，就能判断用户选择了留在页面。

示例代码：

let beforeUnloadFired = false;

// 触发卸载确认对话框
window.onbeforeunload = function(e) {
  beforeUnloadFired = true;
  return '';
};

// 监听页面可见性变化，判断是否取消卸载
document.addEventListener('visibilitychange', function() {
  if (beforeUnloadFired && document.visibilityState === 'visible') {
    console.log('用户选择留在页面');
    beforeUnloadFired = false; // 重置状态，避免误判
  }
});

// 用户确认离开时触发
window.addEventListener('unload', function() {
  console.log('用户选择离开页面');
});

注意事项 #

• unload事件里只能做同步操作，异步逻辑大概率无法执行完成。
• visibilitychange的判断方式不是绝对精准（比如用户切换标签页也会触发），必须结合beforeUnloadFired的状态来过滤误判场景。

内容的提问来源于stack exchange，提问作者jayshankarshahu