如何区分页面重载与窗口关闭事件？需调用不同函数求方案

这个问题确实挺棘手的——onbeforeunload本身并没有提供直接区分页面重载和窗口关闭的参数，不过咱们可以通过一些间接的手段来实现需求，下面是几个经过社区验证的可行方案：

方案一：通过键盘/鼠标交互预判（适合在onbeforeunload触发时实时区分） #

核心思路是：重载行为往往伴随可检测的交互（比如按F5、点击刷新按钮），而关闭窗口的交互有明显的位置特征，我们可以提前标记这些行为，在onbeforeunload里根据标记执行不同逻辑：

let isReload = false;

// 监听刷新快捷键（F5、Ctrl+R、Cmd+R）
window.addEventListener('keydown', (e) => {
  if ((e.key === 'F5') || (e.ctrlKey && e.key === 'r') || (e.metaKey && e.key === 'r')) {
    isReload = true;
  }
});

// 可选：监听鼠标点击浏览器顶部控件（仅作补充，兼容性一般）
window.addEventListener('mousedown', (e) => {
  // 鼠标位置超出页面顶部，大概率是点击浏览器工具栏的按钮
  if (e.clientY < 0) {
    // 这里可以根据不同浏览器的刷新按钮位置做更细致判断，不过稳定性有限
    // 暂时标记为疑似刷新，后续结合键盘事件验证
  }
});

window.addEventListener('beforeunload', () => {
  if (isReload) {
    // 执行重载对应的业务逻辑
    handleReload();
    isReload = false; // 重置标记，避免影响后续操作
  } else {
    // 执行窗口关闭对应的业务逻辑
    handleClose();
  }
});

function handleReload() {
  console.log('页面即将重载');
}

function handleClose() {
  console.log('窗口即将关闭');
}

优缺点：实现简单，能覆盖绝大多数主动刷新场景；但无法检测右键菜单刷新、地址栏回车刷新等无明确交互的场景，准确率并非100%。

方案二：结合beforeunload与pageshow事件（适合事后区分逻辑） #

核心逻辑是：窗口关闭后不会触发pageshow事件，但页面重载会触发。我们可以通过sessionStorage标记页面离开状态，在重载触发后反向判断：

window.addEventListener('beforeunload', () => {
  // 标记页面即将离开
  sessionStorage.setItem('isLeaving', 'true');
});

window.addEventListener('pageshow', () => {
  if (sessionStorage.getItem('isLeaving')) {
    // 存在标记说明是重载（关闭窗口不会触发pageshow）
    handleReload();
    sessionStorage.removeItem('isLeaving'); // 清除标记
  }
});

// 窗口关闭的逻辑可以结合unload事件（注意：部分浏览器可能不触发unload）
window.addEventListener('unload', () => {
  handleClose();
});

function handleReload() {
  console.log('页面完成重载');
}

function handleClose() {
  console.log('窗口已关闭');
}

优缺点：能100%准确区分重载和关闭，兼容性好；但重载的逻辑是在页面重新加载后执行，无法在beforeunload触发时同步执行，适合不需要实时处理的场景。

方案三：利用Performance API辅助判断（现代浏览器专属） #

现代浏览器的Performance API可以获取页面的导航类型，我们可以结合页面加载时的导航信息，辅助判断用户的后续操作：

// 页面加载时记录当前导航类型
const navEntry = performance.getEntriesByType('navigation')[0];
const currentPageIsReload = navEntry.type === 'reload';

let willReload = false;

// 结合方案一的键盘事件监听
window.addEventListener('keydown', (e) => {
  if ((e.key === 'F5') || (e.ctrlKey && e.key === 'r') || (e.metaKey && e.key === 'r')) {
    willReload = true;
  }
});

window.addEventListener('beforeunload', () => {
  if (willReload || currentPageIsReload) {
    // 结合当前页面是否是重载过来的，判断后续操作
    handleReload();
  } else {
    handleClose();
  }
});

优缺点：能提升判断准确率，结合交互事件后效果更好；但仅支持Chrome、Firefox、Edge等现代浏览器，IE11及以下不兼容。

最后补充 #

由于浏览器出于安全和隐私限制，并没有提供直接区分这两个事件的原生API，所以没有100%完美的方案。你可以根据自己的业务需求选择：

• 如果必须在onbeforeunload触发时同步执行逻辑，优先选择方案一+方案三的组合；
• 如果可以接受在页面重载后执行逻辑，方案二是最可靠的选择。

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