如何在页面重载前通过beforeunload事件检测浏览器刷新？

浏览器没有原生API能在beforeunload事件触发时直接区分页面重载和关闭操作，但可以通过以下间接方案实现部分场景的检测：

方案一：监听重载快捷键 #

通过捕获用户按下的重载快捷键（F5、Ctrl+R、Cmd+R），在beforeunload事件中判断是否由重载操作触发：

let isReloadTriggered = false;

// 监听键盘重载快捷键
document.addEventListener('keydown', (e) => {
  const isReloadKey = e.key === 'F5' || 
                      (e.ctrlKey && e.key === 'r') || 
                      (e.metaKey && e.key === 'r');
  if (isReloadKey) {
    isReloadTriggered = true;
  }
});

window.addEventListener('beforeunload', (e) => {
  if (isReloadTriggered) {
    // 这里执行重载前的逻辑
    console.log('页面即将重载');
    // 重置标记，避免后续误判
    isReloadTriggered = false;
  } else {
    // 处理关闭页面或其他导航场景
    console.log('页面即将关闭或跳转到其他地址');
  }

  // 如需弹出确认提示框，设置returnValue（部分浏览器会忽略自定义文本）
  // e.returnValue = '确定要离开当前页面吗？';
});

局限性 #

这个方案只能覆盖快捷键触发的重载，无法捕获用户点击浏览器自带重载按钮的场景。

方案二：结合会话存储的补充验证 #

如果需要覆盖更多场景，可以在beforeunload时标记会话存储，页面重新加载后验证标记，反向推断之前的操作是重载：

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

// 页面加载完成后验证
window.addEventListener('load', () => {
  if (sessionStorage.getItem('willUnload') === 'true') {
    // 说明之前的unload是重载操作
    console.log('页面是通过重载加载的');
    sessionStorage.removeItem('willUnload');
  } else {
    console.log('页面是首次加载或从其他页面导航而来');
  }
});

局限性 #

这个方案无法在beforeunload触发时实时检测重载，只能在页面重新加载后回溯判断，适合不需要在unload前即时处理的场景。

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