Angular 12 检测浏览器关闭事件，window:beforeunload监听不触发求助

排查及解决方法 #

• 先确认测试操作符合浏览器触发规则
  现代浏览器为了避免恶意页面骚扰用户，对beforeunload事件的触发做了限制：如果用户从未和当前页面产生过任何交互（没有点击、输入、滚动等操作），浏览器会直接屏蔽该事件。测试时请先点击页面任意位置，再关闭标签/窗口验证。
• 先验证事件本身是否触发
  很多时候不是事件没触发，是sendBeacon请求被跨域规则拦截，没有在网络面板展示。可以在事件回调第一行加打印日志，打开浏览器控制台的「保留日志」（Preserve log）开关后再测试，确认事件是否真的没有执行：

  @HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event) {
    console.log('beforeunload 事件触发'); // 新增这行验证
    navigator.sendBeacon(`${this.appConfigService.appConfig.apiUrl}/Account/LogoutDirectly/`);
  }
  

  如果日志正常输出，说明事件已经触发，只需要排查后端接口的CORS配置，允许跨域POST请求即可。
• 替换为原生事件绑定避免Angular绑定问题
  部分Angular版本的HostListener对全局window事件的绑定可能存在偶发失效问题，可以改用原生JS的事件监听方式写在根组件的ngOnInit生命周期中：

  ngOnInit(): void {
    window.addEventListener('beforeunload', (event) => {
      navigator.sendBeacon(`${this.appConfigService.appConfig.apiUrl}/Account/LogoutDirectly/`);
    });
  }
  

• 兼容浏览器bfcache策略
  Chrome、Firefox等浏览器的前进后退缓存（Back/Forward Cache，bfcache）会在用户关闭页面后将页面状态冻结缓存，此时不会触发beforeunload事件，如果需要覆盖这种场景，可以额外监听pagehide事件做兜底处理。

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