如何使用beforeunload触发方法且不弹出确认对话框？

现有代码问题排查 #

• 你当前代码中的e.preventDefault()、e.returnValue = ''两行是触发关闭页面确认弹窗的核心原因，要实现无弹窗效果直接删除这两行即可
• 默认的Angular HttpClient异步请求会在页面卸载阶段被浏览器主动中断，大概率无法成功送达后端，需要用浏览器专门为卸载场景设计的API处理

修正后代码实现 #

推荐使用navigator.sendBeacon()API完成请求，该API天生支持页面卸载阶段的异步请求发送，不会被浏览器中断，也不会阻塞页面关闭流程：

@HostListener('window:beforeunload', ['$event'])
onWindowClose(e: any): void {
  this.sessionObject.End = new Date();
  // 构造请求参数，适配sendBeacon的传输格式要求
  const requestBody = new Blob(
    [JSON.stringify(this.sessionObject)], 
    { type: 'application/json' }
  );
  // 替换为你实际的后端接口地址
  const apiUrl = '你的后端接口完整地址';
  navigator.sendBeacon(apiUrl, requestBody);
}

补充说明 #

• 如果需要复用原有authService.updateUserSession方法，可将该方法封装的HttpClient请求改为同步模式（不推荐，会阻塞页面关闭，影响用户体验）
• navigator.sendBeacon有单请求最大64KB的体积限制，完全满足会话结束上报这类轻量数据的传输需求
• 注意你原有代码中的方法名存在拼写错误：updateUserSesson应为updateUserSession

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