onbeforeunload事件自定义弹窗：点击No按钮保留当前窗口的实现问题

我懂你想要完全替换浏览器默认弹窗的需求，但得先给你说清楚：现代浏览器出于安全和用户体验的限制，已经不允许在onbeforeunload事件里完全自定义带Yes/No按钮的弹窗了。浏览器会强制触发自带的确认框，就是你遇到的那种"Leave this page"/"Stay on this page"的弹窗，这是没法绕过的安全机制。

不过我们可以换个思路，针对不同的页面卸载场景，分情况处理，尽可能实现你要的自定义体验：

可行的解决方案 #

我们可以拦截页面内的主动操作（比如点击链接、提交表单），用自定义弹窗控制；对于关闭标签页、刷新这类系统级操作，只能退而求其次，用浏览器默认弹窗但自定义提示文本（部分浏览器支持）。

第一步：先写自定义弹窗的HTML/CSS #

<!-- 自定义弹窗 -->
<div id="exitConfirmModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 9999;">
  <h3>确认离开？</h3>
  <p>你确定要离开当前页面吗？未保存的内容可能会丢失。</p>
  <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem;">
    <button id="stayBtn" style="padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;">No</button>
    <button id="leaveBtn" style="padding: 0.5rem 1rem; background: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Yes</button>
  </div>
</div>
<!-- 遮罩层 -->
<div id="modalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998;"></div>

第二步：JS逻辑实现 #

let isUserConfirmed = false; // 标记用户是否确认离开
const modal = document.getElementById('exitConfirmModal');
const overlay = document.getElementById('modalOverlay');
const stayBtn = document.getElementById('stayBtn');
const leaveBtn = document.getElementById('leaveBtn');

// 显示自定义弹窗的函数
function showCustomExitModal(onConfirm) {
  modal.style.display = 'block';
  overlay.style.display = 'block';

  // 点击Yes：确认离开
  leaveBtn.onclick = () => {
    isUserConfirmed = true;
    modal.style.display = 'none';
    overlay.style.display = 'none';
    onConfirm(true);
  };

  // 点击No：留在页面
  stayBtn.onclick = () => {
    isUserConfirmed = false;
    modal.style.display = 'none';
    overlay.style.display = 'none';
    onConfirm(false);
  };
}

// 拦截页面内的链接点击
document.addEventListener('click', (e) => {
  const target = e.target;
  // 只拦截非锚点的外部链接
  if (target.tagName === 'A' && !target.href.startsWith('#')) {
    e.preventDefault();
    const targetHref = target.href;
    showCustomExitModal((confirmed) => {
      if (confirmed) {
        window.location.href = targetHref;
      }
    });
  }
});

// 拦截表单提交
document.addEventListener('submit', (e) => {
  if (!isUserConfirmed) {
    e.preventDefault();
    const targetForm = e.target;
    showCustomExitModal((confirmed) => {
      if (confirmed) {
        targetForm.submit();
      }
    });
  }
});

// 处理关闭标签页、刷新操作
window.onbeforeunload = (e) => {
  if (!isUserConfirmed) {
    // 这里只能触发浏览器默认弹窗，部分浏览器支持自定义文本
    e.preventDefault();
    return '你确定要离开吗？未保存的内容会丢失。';
  }
};

关键说明 #

1. 为什么不能完全替换默认弹窗？
   浏览器为了防止恶意网站劫持用户操作（比如强制不让用户关闭页面），限制了onbeforeunload事件的能力，不允许在这个事件中异步显示自定义弹窗，只能通过返回非空字符串触发自带的确认框。

2. 方案的优势

   • 对于用户主动触发的操作（点击链接、提交表单），完全用自定义弹窗控制，没有默认弹窗干扰；
   • 对于系统级操作（关闭标签页、刷新），虽然只能用默认弹窗，但可以自定义提示文本（注：Chrome、Edge等浏览器已经不再显示自定义文本，只会显示默认文案，但不影响功能）。

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