Next.js项目：关闭浏览器标签页时屏蔽默认alert，仅显示自定义弹窗

问题分析 #

你当前的代码里，beforeunload事件处理函数中设置了e.returnValue = ""和return ""，这会触发浏览器自带的卸载确认弹窗——这就是先弹出默认框、用户取消后才显示自定义弹窗的核心原因。另外，重写window.alert完全无效，因为beforeunload的默认弹窗并非alert，而是浏览器的安全级确认框。

解决方案 #

要仅展示自定义弹窗，需移除触发默认弹窗的代码，同时通过状态管理控制页面卸载逻辑：

• 删掉e.returnValue赋值和return ""语句，避免触发浏览器默认弹窗
• 拆分popstate和beforeunload事件的处理逻辑，分别应对浏览器后退/前进与页面卸载场景
• 新增状态标记用户是否确认离开，让自定义弹窗的交互能正确控制页面卸载

修改后的完整代码 #

import { useState, useEffect } from 'react';

export default function YourComponent() {
  const [openPopUp, setOpenPopUp] = useState(false);
  const [isConfirmedUnload, setIsConfirmedUnload] = useState(false);

  // 处理浏览器后退/前进事件
  const handlePopState = (e) => {
    e.preventDefault();
    setOpenPopUp(true);
    // 重置历史记录，避免后退按钮重复触发
    window.history.pushState(null, null, window.location.pathname);
  };

  // 处理页面卸载（关闭标签、刷新等）事件
  const handleBeforeUnload = (e) => {
    // 用户已确认离开，允许页面卸载
    if (isConfirmedUnload) return;

    e.preventDefault();
    // 显示自定义弹窗
    setOpenPopUp(true);
    // 不要设置e.returnValue或返回字符串，避免触发默认弹窗
  };

  // 自定义弹窗确认离开逻辑
  const handleConfirmLeave = () => {
    setIsConfirmedUnload(true);
    setOpenPopUp(false);
    // 手动触发页面卸载（根据场景选择合适的方式）
    if (window.close) {
      window.close();
    } else {
      window.location.reload();
    }
  };

  // 自定义弹窗取消离开逻辑
  const handleCancelLeave = () => {
    setOpenPopUp(false);
    setIsConfirmedUnload(false);
    // 重置历史记录，防止后续误触发
    window.history.pushState(null, null, window.location.pathname);
  };

  useEffect(() => {
    // 初始化历史记录，拦截后退按钮
    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener('popstate', handlePopState);
    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('popstate', handlePopState);
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return (
    <div>
      {/* 你的页面内容 */}
      
      {/* 自定义弹窗（示例结构，替换成你自己的HTML/CSS实现） */}
      {openPopUp && (
        <div style={{position: 'fixed', top:0, left:0, width:'100%', height:'100%', background:'rgba(0,0,0,0.5)', display:'flex', justifyContent:'center', alignItems:'center'}}>
          <div style={{background:'white', padding:'2rem', borderRadius:'8px'}}>
            <h3>确认离开？</h3>
            <p>你确定要关闭当前页面吗？</p>
            <button onClick={handleConfirmLeave} style={{marginRight:'1rem', padding:'0.5rem 1rem'}}>确认离开</button>
            <button onClick={handleCancelLeave} style={{padding:'0.5rem 1rem'}}>取消</button>
          </div>
        </div>
      )}
    </div>
  );
}

关键说明 #

• 移除默认弹窗触发代码：删除e.returnValue = ""和return ""后，浏览器不会再弹出默认的卸载确认框
• 状态控制页面卸载：通过isConfirmedUnload标记用户是否确认离开，确保只有用户主动确认后，页面才会执行卸载操作
• 拆分事件处理：popstate负责处理浏览器导航，beforeunload负责处理页面卸载，逻辑更清晰
• 浏览器限制提示：现代浏览器对beforeunload事件有严格的安全限制，无法完全自定义卸载确认的交互逻辑，但通过上述方式可以绕过默认弹窗，仅展示自定义弹窗

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