如何实现浏览器刷新时自动重定向至其他网页？

嘿，我完全理解你有特定场景必须要做这个功能——先提前打个招呼：这种刷新就跳转的操作确实会严重影响用户体验，除非是合规要求、强制引导这类非做不可的刚需，不然真心不推荐用。不过既然你明确需要，下面给你两种可行的实现方案：

方案一：用localStorage标记刷新行为 #

这个方法的核心逻辑是：在页面即将卸载（刷新属于卸载场景的一种）时存一个标记，等页面重新加载时检查这个标记，触发重定向。代码如下：

// 监听页面即将卸载的事件（刷新、关闭标签页都会触发）
window.addEventListener('beforeunload', () => {
  localStorage.setItem('isRefreshing', 'true');
});

// 页面加载完成后检查标记
window.addEventListener('load', () => {
  const refreshFlag = localStorage.getItem('isRefreshing');
  if (refreshFlag === 'true') {
    // 先清除标记，避免下次正常打开页面也被重定向
    localStorage.removeItem('isRefreshing');
    // 替换成你需要跳转的目标URL
    window.location.href = 'https://your-target-page.com';
  }
});

小提醒：如果用户是关闭标签页后重新打开，这个标记也会触发重定向。如果需要区分“刷新”和“关闭后重新打开”，得加更复杂的逻辑（比如结合时间戳判断），但大部分场景下上面的代码足够用。

方案二：用浏览器性能API判断加载类型 #

有些浏览器支持通过性能API直接判断页面是不是刷新加载的，不过老版本浏览器兼容性稍差，先看传统写法（已废弃但仍可用）：

window.addEventListener('load', () => {
  // TYPE_RELOAD 对应刷新行为，值为1
  if (performance.navigation.type === 1) {
    window.location.href = 'https://your-target-page.com';
  }
});

因为performance.navigation已经被标记为废弃，更推荐用新的performance.getEntriesByType方法：

window.addEventListener('load', () => {
  const navigationEntries = performance.getEntriesByType('navigation');
  if (navigationEntries.length > 0) {
    const loadType = navigationEntries[0].type;
    // reload = 刷新，navigate = 正常打开，back_forward = 后退/前进
    if (loadType === 'reload') {
      window.location.href = 'https://your-target-page.com';
    }
  }
});

额外注意事项 #

• 部分浏览器的隐私模式会限制localStorage的使用，这时候方案一可能失效，建议做个降级处理。
• 如果用户禁用了JavaScript，所有前端方案都无法生效，所以不能把这个作为唯一的控制手段。

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