Angular 5中监听window.onbeforeunload弹窗用户点击操作的实现

嗨，这个问题我之前也踩过坑，核心原因其实是浏览器的安全限制：beforeunload 事件的设计仅仅是用来触发确认提示，没办法让我们获取用户最终点击了「Leave」还是「Stay」——浏览器不会暴露这个选择结果，所以你没法直接根据选择执行函数a或b。

为什么现有代码做不到？ #

你当前的代码只是设置了提示文案，触发浏览器原生的确认框，但这个弹窗完全受浏览器控制，我们的代码无法监听用户的选择动作，自然没法分支执行不同函数。

分场景的替代方案 #

1. 如果是页面内的路由跳转（比如用户点击页面内按钮跳转到其他路由）

这种情况可以用Angular的CanDeactivate路由守卫来实现，它能让我们自定义确认逻辑，并且完全掌控用户的选择结果：

首先创建一个CanDeactivate守卫服务：

import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

// 定义组件需要实现的接口
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

然后在你的组件里实现对应的方法（这里用Angular Material对话框举例，也可以用原生confirm）：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { MatDialog } from '@angular/material/dialog';

constructor(private dialog: MatDialog) {}

canDeactivate(): Observable<boolean> | boolean {
  // 判断是否有未提交的修改
  if (!this.accepted && this.details.length !== 0) {
    const dialogRef = this.dialog.open(ConfirmLeaveDialogComponent);
    
    return dialogRef.afterClosed().pipe(
      map(result => {
        if (result) {
          // 用户选择Leave，执行函数a
          this.functionA();
          return true; // 允许路由跳转
        } else {
          // 用户选择Stay，执行函数b
          this.functionB();
          return false; // 阻止路由跳转
        }
      })
    );
  }
  return true; // 无修改时直接允许离开
}

// 你的Leave逻辑函数
functionA() {
  console.log('用户选择离开，执行清理/提交逻辑');
}

// 你的Stay逻辑函数
functionB() {
  console.log('用户选择留下，继续编辑');
}

最后在路由配置里注册这个守卫：

const routes: Routes = [
  {
    path: 'your-target-page',
    component: YourComponent,
    canDeactivate: [CanDeactivateGuard]
  }
];

2. 如果是用户关闭浏览器窗口/刷新页面

这种情况受限于浏览器安全策略，确实无法获取用户的选择结果。你只能通过beforeunload提示用户有未保存的修改，但没办法在用户点击Leave后执行函数a，或者点击Stay后执行函数b。

如果必须处理关闭/刷新的场景，只能做一些通用的操作（比如在beforeunload里清理临时缓存），或者引导用户尽量通过页面内的按钮来离开（用上面的路由守卫方案）。

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