如何在React JS中实现浏览器刷新页面时触发自定义弹出卡片

首先明确浏览器安全策略的核心限制：beforeunload 事件触发时（用户点击浏览器刷新、关闭按钮、地址栏跳转等系统级离开操作），不允许开发者渲染自定义弹窗，也不允许拦截离开流程后执行自定义JS逻辑，仅能调用浏览器自带的固定样式弹窗作为兜底，避免恶意网站强制拦截用户离开页面。

如果要实现自定义样式的离开提示卡片，可采用「自定义拦截 + 系统弹窗兜底」的组合方案，覆盖绝大多数使用场景：

方案实现步骤 #

1. 新增未保存内容状态标记
   用于判断当前是否需要触发离开拦截，比如用户正在上传文件、填写表单未提交时标记为需要拦截：

let hasUnsavedContent = true;

2. 提前写好自定义弹窗的HTML和CSS，默认设为隐藏状态，样式可完全匹配你需要的设计效果
3. 拦截所有页内主动触发的离开操作
   这类场景可完全使用自定义弹窗，不需要调用系统弹窗：

const customModal = document.querySelector("#custom-leave-modal");
const confirmLeaveBtn = customModal.querySelector("#confirm-leave");
const cancelLeaveBtn = customModal.querySelector("#cancel-leave");

// 拦截站内a标签跳转
document.querySelectorAll("a[href]").forEach(link => {
  link.addEventListener("click", (e) => {
    if (!hasUnsavedContent) return;
    e.preventDefault();
    // 展示自定义弹窗
    customModal.style.display = "block";
    // 确认离开逻辑
    confirmLeaveBtn.onclick = () => {
      hasUnsavedContent = false;
      window.location.href = link.href;
    };
    // 取消离开逻辑
    cancelLeaveBtn.onclick = () => {
      customModal.style.display = "none";
    };
  })
})

// 如果是单页应用，可直接调用框架路由的前置拦截钩子：
// Vue Router: 可在 beforeEach 钩子中做拦截逻辑
// React Router: 可在 useBeforeUnload 或路由 loader/action 中做拦截

4. 系统级离开操作兜底
   针对浏览器刷新、关闭等无法拦截的场景，保留系统自带弹窗作为兜底，避免用户丢失内容：

window.addEventListener("beforeunload", (e) => {
  if (!hasUnsavedContent) return;
  e.preventDefault();
  e.returnValue = "您的上传内容会在离开页面后丢失，确定要离开吗？";
  return e.returnValue;
});

注意事项 #

• 不要尝试在beforeunload事件中调用alert、confirm或者渲染自定义DOM，这类操作都会被浏览器直接拦截，无法生效
• 自定义弹窗的样式可完全自主调整，和系统弹窗无关，仅能在页内主动触发离开的场景下展示

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