如何判断window beforeunload事件触发原因：按键刷新或关闭浏览器

要区分beforeunload是按键（Ctrl+R/F5）刷新还是窗口关闭触发的，核心思路是提前通过键盘事件标记刷新状态，再结合自定义弹窗完成确认流程，具体实现如下：

实现步骤 #

• 定义状态变量记录是否为按键触发的刷新
• 监听键盘事件，捕获刷新快捷键并标记状态
• 在beforeunload事件中根据状态区分场景，弹出自定义确认框
• 确认后分别执行刷新或放行浏览器默认关闭操作

完整代码示例 #

// 状态变量：标记是否为按键触发的刷新
private isReloadByKey = false;

constructor() {
  // 监听键盘事件，捕获Ctrl+R/F5刷新快捷键
  fromEvent(window, 'keydown').subscribe((e: KeyboardEvent) => {
    const isCtrlR = e.ctrlKey && e.key === 'r';
    const isF5 = e.key === 'F5';
    
    if (isCtrlR || isF5) {
      e.preventDefault(); // 先阻止默认刷新，等待用户确认
      this.isReloadByKey = true;
      this.handleOnWindowUnload();
    }
  });

  // 监听beforeunload事件，处理浏览器刷新按钮、窗口关闭等场景
  fromEvent(window, 'beforeunload').subscribe((e: BeforeUnloadEvent) => {
    // 按键触发的刷新已经单独处理，跳过重复逻辑
    if (this.isReloadByKey) return;

    e.preventDefault();
    e.returnValue = ''; // 兼容部分浏览器的阻止默认行为要求
    this.handleOnWindowUnload();
  });
}

handleOnWindowUnload(): void {
  // 自定义确认文本，根据触发场景切换
  const confirmMsg = this.isReloadByKey ? '确定要刷新页面吗？' : '确定要关闭窗口吗？';
  
  if (confirm(confirmMsg)) {
    if (this.isReloadByKey) {
      // 用户确认刷新，手动执行页面刷新
      window.location.reload();
      this.isReloadByKey = false; // 重置状态，避免影响后续操作
    } else {
      // 用户确认关闭，放行浏览器默认操作
      delete (e as any).returnValue;
    }
  } else {
    // 用户取消操作，重置状态并保持阻止行为
    this.isReloadByKey = false;
    (e as BeforeUnloadEvent).returnValue = ' ';
  }
}

关键注意点 #

• 浏览器刷新按钮触发的beforeunload无法通过键盘事件标记，这类场景会被归为“窗口关闭”分支。如果需要严格区分按钮刷新和关闭，目前没有完全可靠的方法（浏览器未提供相关事件），只能通过窗口焦点、尺寸变化等间接判断，但兼容性和准确性有限。
• 部分浏览器会强制替换自定义弹窗为系统默认确认框，需要提前测试目标浏览器的表现。
• 务必在操作完成后重置isReloadByKey状态，避免后续操作出现逻辑混乱。

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