如何在页面刷新或回退时通过JavaScript或简便方案重定向至其他URL

嘿，这个需求我之前帮不少开发者解决过——不管是防止用户回退到登录前的敏感页面，还是刷新后引导到新版页面，都能用下面这些方案搞定。

直接在页面加载时做重定向会陷入无限循环，所以我们得用个“标记”来区分首次加载和刷新操作，sessionStorage就是个不错的选择：

window.addEventListener('load', function() {
  // 检查是否已经触发过重定向，避免循环
  const hasRedirected = sessionStorage.getItem('hasRedirected');
  if (!hasRedirected) {
    // 首次加载页面时，设置标记
    sessionStorage.setItem('hasRedirected', 'true');
  } else {
    // 刷新时触发重定向
    window.location.href = 'https://your-target-url.com';
    // 可选：清除标记，确保下次正常访问页面时不会直接重定向
    sessionStorage.removeItem('hasRedirected');
  }
});

原理很简单：第一次打开页面时，我们给sessionStorage存个标记；当用户刷新页面，标记还在，就触发重定向，之后再把标记删掉，避免后续操作受影响。

浏览器回退是基于历史记录的，所以我们要监听popstate事件——不过要注意，页面初始加载时这个事件也会触发，得做个区分：

// 先给当前页面添加一条历史记录，避免用户回退直接跳出当前域
window.history.pushState({ page: 'current-page' }, '', window.location.href);

window.addEventListener('popstate', function(event) {
  // 判断是否是用户主动回退操作（初始加载时event.state为null）
  if (event.state && event.state.page === 'current-page') {
    // 触发重定向
    window.location.href = 'https://your-target-url.com';
    // 再添加一条历史记录，防止用户再次回退到这个页面
    window.history.pushState({ page: 'redirected' }, '', window.location.href);
  }
});

这里我们先手动push一条当前页面的历史状态，用户回退时，popstate事件会拿到我们之前存的状态，这时候就触发重定向，并且再push一条新状态，堵住再次回退的路径。

把上面两个方案结合起来，就能同时覆盖刷新和回退两种情况：

// 处理刷新逻辑
window.addEventListener('load', function() {
  const hasRedirected = sessionStorage.getItem('hasRedirected');
  if (hasRedirected) {
    window.location.href = 'https://your-target-url.com';
    sessionStorage.removeItem('hasRedirected');
  } else {
    sessionStorage.setItem('hasRedirected', 'true');
  }
});

// 处理回退逻辑
window.history.pushState({ page: 'current-page' }, '', window.location.href);
window.addEventListener('popstate', function(event) {
  if (event.state && event.state.page === 'current-page') {
    window.location.href = 'https://your-target-url.com';
    window.history.pushState({ page: 'redirected' }, '', window.location.href);
  }
});

如果用户禁用了JavaScript，前端方案就失效了。这时候可以用服务器端重定向，比如在后端设置HTTP 302状态码，或者返回带Location响应头的内容。不过这个方案是全局的，没法区分“正常访问”和“刷新/回退”，所以适合配合前端方案一起用，作为兜底。

• 隐私模式下部分浏览器会限制sessionStorage，这时候可以换成localStorage，但记得用完要清除，避免影响用户的其他会话。
• 不同浏览器对popstate的触发时机可能有细微差异，测试时多覆盖Chrome、Firefox、Safari这些主流浏览器。
• 重定向的URL可以是跨域的，只要是合法的地址就行，不需要和当前页面同源。

内容的提问来源于stack exchange，提问作者Sanath K.S