如何在beforeunload回调中判断页面是直接关闭还是跳转/重定向？

浏览器的beforeunload事件本身无法直接区分页面是被直接关闭还是通过a标签跳转、location重定向触发的卸载——这两种场景都会触发该事件。我们需要通过提前标记行为类型的方式来做区分，以下是两种可靠的实现方案：

方案一：通过全局标记记录跳转行为 #

核心思路是：在触发跳转动作（比如点击a标签、调用location方法）时，设置一个全局标记，在beforeunload中通过这个标记判断是否是主动跳转。

具体实现 #

1. 监听所有a标签的点击事件，标记跳转状态

// 标记是否是主动跳转
let isInitiatedNavigation = false;

// 监听所有a标签点击
document.addEventListener('click', (e) => {
  const target = e.target.closest('a');
  if (target && target.href) {
    // 排除锚点跳转（同一页面内的跳转不会触发unload）
    if (target.origin === window.location.origin && target.hash) return;
    isInitiatedNavigation = true;
  }
});

2. 监听通过JS触发的重定向（比如location.href、location.replace）
   可以封装重定向方法，或者重写location的相关属性：

// 重写location.href的setter
const originalHref = Object.getOwnPropertyDescriptor(window.location, 'href');
Object.defineProperty(window.location, 'href', {
  set(value) {
    isInitiatedNavigation = true;
    originalHref.set.call(window.location, value);
  },
  get() {
    return originalHref.get.call(window.location);
  }
});

// 同理处理location.replace
const originalReplace = window.location.replace;
window.location.replace = function(value) {
  isInitiatedNavigation = true;
  originalReplace.call(this, value);
};

3. 在beforeunload中判断状态

window.addEventListener('beforeunload', (e) => {
  if (!isInitiatedNavigation) {
    // 页面直接关闭场景
    console.log('页面正在被关闭');
    // 若需发送统计请求，建议用同步XMLHttpRequest，异步请求可能被浏览器取消
  } else {
    // 主动跳转/重定向场景
    console.log('页面正在跳转/重定向');
    // 重置标记，避免后续误判
    isInitiatedNavigation = false;
  }
});

方案二：通过visibilitychange事件辅助判断 #

当页面被直接关闭时，浏览器通常会先触发visibilitychange事件将页面状态变为hidden，再触发beforeunload；而主动跳转时，部分浏览器会先触发beforeunload再处理页面隐藏。这个方案可作为补充判断手段。

具体实现 #

let isPageHidden = false;

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    isPageHidden = true;
  }
});

window.addEventListener('beforeunload', (e) => {
  if (isPageHidden && !isInitiatedNavigation) {
    // 大概率是页面关闭场景
    console.log('页面可能被关闭');
  } else if (!isPageHidden && isInitiatedNavigation) {
    // 大概率是主动跳转场景
    console.log('页面可能在跳转');
  }
});

注意事项 #

• 同步请求限制：beforeunload中发送异步请求（如fetch、axios异步调用）可能被浏览器取消，若需发送收尾请求，建议使用同步XMLHttpRequest，但同步请求会阻塞页面，需谨慎使用。
• 浏览器兼容性：不同浏览器对事件触发顺序的处理存在细微差异，建议结合两种方案做综合判断。
• 刷新场景：用户刷新页面也会触发beforeunload，此时isInitiatedNavigation为false，目前没有完全可靠的方法区分刷新与关闭，只能通过监听F5键、刷新按钮点击等间接手段补充判断。

内容的提问来源于stack exchange，提问作者why do i have so much question