使用beforeunload实现关闭浏览器标签页时弹出提示对话框

问题情况 #

• 需求：点击浏览器标签页关闭按钮或使用Ctrl+w快捷键时，弹出确认提示对话框
• 异常：参考网上示例实现后无任何提示，已在**Chrome 116.0.5845.141（64位）和Edge 116.0.1938.69（64位）**中测试
• 操作演示：
  

问题原因 #

Chrome、Edge这类Chromium内核浏览器对beforeunload（页面关闭前触发的事件）有严格限制：

1. 必须有用户主动交互：如果用户仅打开页面未进行点击、输入等操作，浏览器会直接跳过提示，防止恶意网站滥用该事件
2. 事件写法不规范：仅绑定事件无效，必须同时设置event.returnValue并调用event.preventDefault()，缺一不可
3. 在线编辑器环境限制：Codesandbox的预览页面可能以iframe形式运行，这类环境会额外限制beforeunload事件触发

解决方案 #

1. 满足用户交互前提 #

打开页面后先点击任意区域，再尝试关闭标签页，浏览器才会允许弹出提示

2. 修正代码实现 #

React组件中正确绑定事件的示例代码：

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      // 现代浏览器必须的两步操作
      event.preventDefault();
      event.returnValue = "";
      // 兼容部分旧浏览器
      return "";
    };

    window.addEventListener("beforeunload", handleBeforeUnload);
    // 组件卸载时移除事件，避免内存泄漏
    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
  }, []);

  return (
    <div className="App">
      <h1>测试关闭提示</h1>
      <p>先点击页面任意区域，再尝试关闭标签页</p>
    </div>
  );
}

export default App;

3. 更换测试环境 #

建议将代码拉到本地开发环境，或使用非iframe的独立页面测试，避开在线编辑器的环境限制

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