如何使中转跳转页留存浏览器历史，激活新标签页返回按钮？

浏览器会对无用户交互的自动跳转做历史记录优化——如果页面加载后立刻通过window.location.href跳转，浏览器会把中转页和目标页的跳转视为一个“连续操作”，直接合并历史记录，不会保留中转页的条目。而当你主动点击页面元素触发跳转时，这属于用户主动交互行为，浏览器会认为这是你明确的访问操作，所以会正常留存中转页到历史栈里。

核心思路是让中转页被浏览器识别为一个“有效访问页面”，同时在返回时自动跳回A页。这里给你一个可靠的实现方案：

<!DOCTYPE html>
<html>
<head>
  <title>跳转中转页</title>
</head>
<body>
  <script>
    // 页面初始化完成后执行
    window.addEventListener('DOMContentLoaded', () => {
      // 先将当前中转页推入历史记录，确保它被浏览器记录
      history.pushState({ from: 'redirector' }, document.title, window.location.href);
      
      // 延迟100ms跳转，给浏览器足够时间处理历史记录（避免被优化）
      setTimeout(() => {
        // 替换为你的目标B页URL
        window.location.href = 'https://你的B页地址.com';
      }, 100);
    });

    // 监听浏览器返回事件：当从B页回到中转页时，自动跳回A页
    window.addEventListener('popstate', () => {
      // 替换为你的来源A页URL
      window.location.href = 'https://你的A页地址.com';
    });
  </script>
</body>
</html>

代码说明： #

1. history.pushState：手动将中转页的状态推入历史栈，强制浏览器记录这个页面。
2. setTimeout延迟跳转：给浏览器留出处理历史记录的时间，避免自动跳转被合并优化。100ms的延迟足够短，用户几乎感知不到，但能让浏览器完成历史记录的写入。
3. popstate事件监听：当用户在B页点击返回按钮时，浏览器会回到中转页，此时触发popstate事件，我们立刻跳转到A页，实现“从B页返回直接打开A页”的需求。

替代方案（如果延迟跳转不可接受） #

如果不想加延迟，可以尝试在中转页添加一个极其简单的用户交互触发跳转（比如默认自动触发点击一个隐藏按钮）：

<!DOCTYPE html>
<html>
<head>
  <title>跳转中转页</title>
  <style>#jumpBtn { display: none; }</style>
</head>
<body>
  <button id="jumpBtn">跳转</button>
  <script>
    const jumpBtn = document.getElementById('jumpBtn');
    jumpBtn.addEventListener('click', () => {
      window.location.href = 'https://你的B页地址.com';
    });

    // 页面加载后模拟用户点击按钮
    window.addEventListener('DOMContentLoaded', () => {
      jumpBtn.click();
    });

    window.addEventListener('popstate', () => {
      window.location.href = 'https://你的A页地址.com';
    });
  </script>
</body>
</html>

这种方式通过模拟用户交互触发跳转，浏览器会认为这是用户主动操作，从而保留中转页的历史记录。

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