如何拦截Browser close/Tab close动作以显示custom navigation pop up？

这个需求确实很常见，不过得先明确浏览器的一个核心限制——为了防止恶意网站劫持用户操作，beforeunload事件本身不允许直接替换默认的确认弹窗，但我们可以通过一些巧妙的逻辑来实现类似的效果，而且能做到全浏览器兼容。

核心思路 #

我们的实现逻辑是：

• 先跟踪页面是否存在未保存更改的状态
• 拦截beforeunload事件，阻止浏览器的默认提示
• 显示自定义弹窗，根据用户的选择决定是否继续关闭/导航操作

具体实现步骤 #

1. 跟踪未保存状态 #

首先需要一个变量来标记页面是否有未保存的更改，比如当用户修改表单内容时，更新这个状态：

// 标记是否有未保存更改
let hasUnsavedChanges = false;

// 示例：监听表单输入，标记状态
document.querySelector('form')?.addEventListener('input', () => {
  hasUnsavedChanges = true;
});

2. 拦截浏览器关闭/标签页关闭事件 #

在beforeunload事件中，我们不能直接弹出自定义窗口，但可以阻止默认行为，然后触发我们自己的弹窗：

// 标记是否正在处理关闭流程
let isClosing = false;

window.addEventListener('beforeunload', (e) => {
  if (hasUnsavedChanges && !isClosing) {
    // 阻止浏览器的默认确认弹窗
    e.preventDefault();
    // 某些旧版浏览器需要设置returnValue才能触发提示（这里只是兼容用，实际不用它的内容）
    e.returnValue = '';
    // 显示我们的自定义弹窗
    showCustomConfirmModal();
    // 返回空字符串（部分浏览器要求返回值）
    return '';
  }
});

3. 实现自定义弹窗 #

你需要自己写一个模态框（用HTML/CSS/JS实现），然后处理用户的选择逻辑：

<!-- 自定义弹窗的HTML结构 -->
<div id="customConfirmModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; background: #fff; 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; margin-top: 1.5rem;">
    <button id="confirmLeave" style="padding: 0.5rem 1rem; background: #dc3545; color: #fff; border: none; border-radius: 4px; cursor: pointer;">确定离开</button>
    <button id="stayOnPage" style="padding: 0.5rem 1rem; background: #6c757d; color: #fff; border: none; border-radius: 4px; cursor: pointer;">留在页面</button>
  </div>
</div>

function showCustomConfirmModal() {
  const modal = document.getElementById('customConfirmModal');
  modal.style.display = 'block';

  // 处理「确定离开」的逻辑
  const confirmBtn = document.getElementById('confirmLeave');
  // 先移除之前的监听，避免重复绑定
  confirmBtn.removeEventListener('click', handleConfirmLeave);
  confirmBtn.addEventListener('click', handleConfirmLeave);

  // 处理「留在页面」的逻辑
  const stayBtn = document.getElementById('stayOnPage');
  stayBtn.removeEventListener('click', handleStayOnPage);
  stayBtn.addEventListener('click', handleStayOnPage);

  function handleConfirmLeave() {
    modal.style.display = 'none';
    hasUnsavedChanges = false; // 标记状态已处理
    isClosing = true;
    // 手动触发关闭：如果是JS打开的窗口，用window.close()；否则用跳转空白页模拟
    if (window.opener) {
      window.close();
    } else {
      window.location.replace('about:blank');
    }
  }

  function handleStayOnPage() {
    modal.style.display = 'none';
    isClosing = false;
  }
}

4. 额外优化：拦截页面内导航 #

除了浏览器关闭，用户点击页面内的链接跳转时，也需要拦截并显示自定义弹窗：

document.addEventListener('click', (e) => {
  // 判断点击的是外部链接（不是锚点）且有未保存更改
  const target = e.target.closest('a');
  if (hasUnsavedChanges && target && !target.href.startsWith('#') && target.host === window.location.host) {
    e.preventDefault();
    const targetHref = target.href;
    showCustomNavigationModal(targetHref);
  }
});

function showCustomNavigationModal(targetHref) {
  const modal = document.getElementById('customConfirmModal');
  modal.querySelector('p').textContent = '你有未保存的更改，确定要跳转到其他页面吗？';
  modal.style.display = 'block';

  const confirmBtn = document.getElementById('confirmLeave');
  confirmBtn.removeEventListener('click', handleConfirmNavigation);
  confirmBtn.addEventListener('click', handleConfirmNavigation);

  const stayBtn = document.getElementById('stayOnPage');
  stayBtn.removeEventListener('click', handleStayOnPage);
  stayBtn.addEventListener('click', handleStayOnPage);

  function handleConfirmNavigation() {
    modal.style.display = 'none';
    hasUnsavedChanges = false;
    window.location.href = targetHref;
  }

  function handleStayOnPage() {
    modal.style.display = 'none';
  }
}

浏览器兼容性说明 #

• Chrome/Firefox/Edge：现代浏览器完全支持这个逻辑，beforeunload的preventDefault()能正常阻止默认弹窗，自定义弹窗可以正常显示。
• Safari：Safari对beforeunload限制更严格，需要设置e.returnValue = ''才能触发拦截，而且window.close()只能关闭JS打开的窗口，所以我们用window.location.replace('about:blank')来模拟关闭标签页的效果，这个方法在Safari中是有效的。
• IE11：虽然IE11已经淡出主流，但这个逻辑依然兼容——beforeunload事件的处理方式类似，自定义弹窗也能正常运行。

注意事项 #

• 别滥用这个功能：只有当用户确实有未保存的重要更改时才触发，否则会严重影响用户体验。
• 部分浏览器会在用户多次触发后自动忽略beforeunload的拦截，所以确保逻辑简洁，不要反复触发。
• 对于SPA（单页面应用），可以结合框架的路由守卫来处理，比如React的useEffect监听路由变化、Vue的beforeRouteLeave钩子，逻辑和上面的思路一致。

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