ASP.Net Web Forms下用户离开页面触发自定义弹窗后页面立即关闭如何解决

问题原因 #

onbeforeunload 是浏览器规范定义的事件，默认不会因为自定义弹窗的触发暂停页面卸载流程，你触发自定义弹窗后，页面卸载逻辑还会继续执行，因此不等用户操作就会直接关闭/跳转。
另外出于用户体验和安全限制，浏览器主动触发的离开场景（点击窗口关闭按钮、手动刷新页面、地址栏输入新地址跳转）完全不支持自定义弹窗，只能用浏览器自带的原生确认弹窗，没有任何绕过方案。只有页面内触发的离开操作（点击站内链接、提交表单、点击业务逻辑的跳页按钮）可以用自定义弹窗实现交互。 #

解决代码 #

步骤1：添加onbeforeunload兜底逻辑 #

针对浏览器触发的离开场景，用原生弹窗做兜底，同时加状态位标记用户是否已经确认离开：

var unSavedStatus = false;
var isJumpConfirmed = false; // 标记用户已确认离开，不需要再拦截

window.onbeforeunload = function(e) {
  if (isJumpConfirmed || !unSavedStatus) return undefined;
  // 兼容各浏览器的原生弹窗触发逻辑
  const tip = '您有未保存的修改，确定要离开此页面吗？';
  (e || window.event).returnValue = tip;
  return tip;
}

步骤2：劫持页面内所有离开操作，触发自定义弹窗 #

针对页面内的跳页、提交等操作，先拦截默认行为，弹出你的自定义弹窗，等用户确认后再执行后续操作：

// 拦截所有a标签跳转
document.querySelectorAll('a[href]').forEach(link => {
  link.addEventListener('click', function(e) {
    if (!unSavedStatus || isJumpConfirmed) return;
    // 先阻止默认跳转
    e.preventDefault();
    // 弹出你的自定义弹窗，绑定确认/取消回调
    myPopup.Show({
      onConfirm: () => {
        // 用户确认离开，标记状态后执行跳转
        isJumpConfirmed = true;
        window.location.href = link.href;
      },
      onCancel: () => {
        // 用户取消，关闭弹窗即可
        myPopup.Hide();
      }
    })
  })
})

// 拦截表单提交操作
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function(e) {
    if (!unSavedStatus || isJumpConfirmed) return;
    e.preventDefault();
    myPopup.Show({
      onConfirm: () => {
        isJumpConfirmed = true;
        form.submit();
      },
      onCancel: () => {
        myPopup.Hide();
      }
    })
  })
})

// 其他你自定义的跳页按钮，按照相同逻辑拦截即可

注意事项 #

• 如果页面内有动态生成的a标签、表单或跳页按钮，需要在元素生成后重新绑定拦截事件，或者改用事件委托绑定到document上，避免漏拦截
• 如果使用ASP.NET的PostBack按钮，可以直接在按钮的客户端点击事件里加相同的拦截逻辑即可

内容的提问来源于stack exchange，提问作者Barış Çoruh