移动端beforeunload事件失效问题及Angular场景替代方案咨询

你当前使用beforeunload实现的未保存表单提醒在PC端正常，但因移动端浏览器不支持该事件导致失效，以下是几个可行的替代方案：

原代码回顾 #

@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: BeforeUnloadEvent) {
  if (!this.hasFormChanged) return;
  $event.returnValue();
}

替代方案 #

1. 监听页面可见性变化（visibilitychange） #

移动端浏览器普遍支持visibilitychange事件，当用户切换应用、回到桌面、切换标签页或关闭浏览器时，页面会变为不可见状态，此时可触发提醒逻辑。

@HostListener('document:visibilitychange', ['$event'])
onVisibilityChange(event: Event) {
  if (!this.hasFormChanged) return;
  
  // 页面变为不可见时触发提醒
  if (document.visibilityState === 'hidden') {
    // 建议使用自定义页面弹窗，避免原生confirm被浏览器拦截
    if (confirm('您有未保存的修改，确定离开吗？')) {
      // 允许离开，可执行清理逻辑
    } else {
      // 引导用户回到页面，比如修改标题提醒
      document.title = '⚠️ 有未保存修改';
    }
  }
}

2. 拦截移动端返回事件（popstate） #

针对移动端的物理返回、滑动返回等行为，可监听popstate事件来拦截并提醒用户：

// 组件初始化时添加空历史记录，用于拦截返回动作
ngOnInit() {
  history.pushState(null, '', location.href);
}

@HostListener('window:popstate', ['$event'])
onPopState(event: PopStateEvent) {
  if (!this.hasFormChanged) {
    // 无修改时正常执行返回
    history.back();
    return;
  }

  if (confirm('您有未保存的修改，确定离开吗？')) {
    // 允许返回，清理临时添加的历史记录
    history.back();
  } else {
    // 阻止返回，重新添加历史记录维持栈状态
    history.pushState(null, '', location.href);
  }
}

3. 监听pagehide事件做补充 #

pagehide事件在页面即将卸载或进入缓存时触发，移动端支持度较好，可用来做未保存数据的自动备份：

@HostListener('window:pagehide', ['$event'])
onPageHide(event: PageTransitionEvent) {
  // 排除页面被缓存的情况，仅在真实卸载时处理
  if (!this.hasFormChanged || event.persisted) return;
  // 执行自动备份逻辑
  this.saveDraft();
}

注意事项 #

• 移动端浏览器对原生弹窗（confirm/alert）限制严格，建议使用自定义的页面内弹窗组件，提升兼容性和用户体验；
• 对于SPA内的路由跳转，可额外拦截Router的NavigationStart事件，在跳转前判断是否有未保存修改，逻辑更可控；

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