如何在AngularJS SPA中触发统一的BeforeUnload提示？

问题说明 #

在AngularJS单页应用中，需要在用户离开已修改（formCtrl.$dirty）的表单时触发提示，覆盖两种场景：

• 关闭当前标签页/刷新页面
• 点击应用内部链接跳转路由

当前实现中，关闭标签页的beforeunload事件已正常工作，但内部路由跳转时使用了自定义confirm提示，导致同时出现浏览器原生提示和自定义提示，需求是统一使用浏览器默认提示（保持各浏览器原生一致性，不自定义提示文本）。

当前问题代码 #

let transitionUnloader = () => {};
let unloader = (event) => {event.preventDefault()};

scope.$watch(
  () => {return formCtrl.$dirty;},
  (isDirty) => {
    if (isDirty) {
      transitionUnloader = $transitions.onBefore({}, () => {
        return $window.confirm('You have unsaved data. Continue?');
      });
      $transitions.onEnter({}, transitionUnloader);
      return $window.addEventListener('beforeunload', unloader);
    } else {
      transitionUnloader();
      return $window.removeEventListener('beforeunload', unloader);
    }
  }
);

解决方案代码 #

let transitionUnloader = () => {};
// 修正beforeunload处理函数，兼容各浏览器原生提示触发逻辑
let unloader = (event) => {
  event.preventDefault();
  event.returnValue = ''; // 部分浏览器需要此设置才能唤起默认提示
};

scope.$watch(
  () => formCtrl.$dirty,
  (isDirty) => {
    if (isDirty) {
      // 移除自定义confirm，改用浏览器原生提示逻辑
      transitionUnloader = $transitions.onBefore({}, (transition) => {
        // 触发beforeunload事件，唤起浏览器原生提示
        const beforeUnloadEvent = new Event('beforeunload');
        window.dispatchEvent(beforeUnloadEvent);
        
        // 根据用户选择决定是否继续路由：取消离开则阻止跳转
        if (beforeUnloadEvent.defaultPrevented) {
          return false;
        }
        // 确认离开则允许路由跳转
        return true;
      });
      $window.addEventListener('beforeunload', unloader);
    } else {
      // 清除路由监听和beforeunload监听
      transitionUnloader();
      $window.removeEventListener('beforeunload', unloader);
    }
  }
);

关键修改点 #

• 移除自定义confirm提示：避免与浏览器原生提示重复，确保提示风格统一。
• 优化beforeunload处理函数：添加event.returnValue = ''，兼容Chrome、Firefox等浏览器的原生提示触发要求。
• 调整路由拦截逻辑：在$transitions.onBefore中触发beforeunload事件，唤起浏览器原生提示，根据用户选择决定是否允许路由跳转。
• 删除冗余代码：移除原代码中错误的$transitions.onEnter绑定，避免提前取消路由监听导致后续提示失效。

浏览器原生提示示例 #

• Chrome提示：此页面正在请求您确认是否要离开 - 您输入的数据可能不会被保存。
• Firefox提示：您确定要离开此页面吗？您输入的一些数据可能不会被保存。

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