beforeunload事件跨浏览器兼容及确认离开后重定向页面问题

一、Firefox中beforeunload无效的原因及修复 #

你的代码在Chrome生效但Firefox无效，核心是Firefox的安全策略限制：

• 用户交互要求：Firefox仅在用户与页面发生实际交互（如点击页面、输入内容）后，才会触发beforeunload的确认提示。若用户打开页面未做任何操作就刷新/回退，Firefox会直接允许页面卸载，不会弹出提示。
• 自定义文本被忽略：Firefox会强制使用浏览器自带的提示文本，你返回的"Leaving this page will reset the wizard"不会显示，但事件本身在有交互后仍会触发。

兼容多浏览器的修复代码：

<html>
<head>
<script type="text/javascript">
// 用addEventListener替代直接赋值，兼容性更稳定
window.addEventListener('beforeunload', function(e) {
  // 触发浏览器默认提示逻辑
  e.preventDefault();
  // Chrome需要设置returnValue才能唤起提示框
  e.returnValue = '';
});
</script>
</head>
<body>
<p>测试提示：请先点击页面任意位置，再尝试刷新/回退</p>
</body>
</html>

二、捕获用户确认离开并实现跳转的方案 #

beforeunload事件无法直接获取用户的选择（确认/取消离开），需分场景处理：

1. 处理回退按钮（popstate事件） #

监听浏览器popstate事件，拦截回退操作，手动弹出确认框，用户确认后跳转至目标页面：

window.addEventListener('popstate', function(e) {
  // 阻止默认回退行为
  e.preventDefault();
  
  if (confirm('Leaving this page will reset the wizard')) {
    // 用户确认离开，跳转会话过期页面
    window.location.href = '/session-expired.html';
  } else {
    // 用户取消回退，手动添加历史记录维持当前页面状态
    history.pushState(null, null, window.location.href);
  }
});

// 页面加载时先添加一条历史记录，确保popstate能正常触发
window.onload = function() {
  history.pushState(null, null, window.location.href);
};

2. 处理刷新/关闭标签页 #

对于刷新或关闭标签页的场景，前端无法直接在页面卸载阶段执行跳转（浏览器会阻止这类操作），可通过以下方式间接实现需求：

• 向服务器发送会话过期通知，由服务器标记会话失效，用户下次访问时自动跳转：

window.addEventListener('unload', function() {
  // 用sendBeacon确保请求能在页面卸载时完成发送
  navigator.sendBeacon('/api/invalidate-session', JSON.stringify({ sessionId: 'your-session-id' }));
});

• 前端清除本地会话数据，页面重新加载时自动检查并跳转：

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = '';
});

window.addEventListener('unload', function() {
  // 清除会话相关本地存储
  localStorage.removeItem('active-session');
});

// 页面加载时检查会话状态
window.onload = function() {
  if (!localStorage.getItem('active-session')) {
    window.location.href = '/session-expired.html';
  }
};

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