跨域自动跳转后，如何控制返回按钮跳转至指定中间页面？

当前问题源于浏览器对连续自动跳转的优化策略：加载后立即触发的跨域跳转被浏览器合并，导致历史栈丢失了A.com/page2.html和B.com的条目，因此从C.com返回时直接回到A.com/index。

解决方案 #

通过给每个自动跳转添加短暂延迟，让浏览器有足够时间将当前页面写入历史栈，保留完整的访问序列。

1. 修改A.com/page2.html的跳转逻辑

移除多余的history.pushState，添加延迟跳转：

<body>
  <h1>Domain A page 2</h1>
  <a href="https://B.com">Click here to go to domain B</a>
</body>

<script>
  // 延迟100ms跳转，确保当前页面被写入历史栈
  setTimeout(() => {
    window.location.assign("https://B.com");
  }, 100);
</script>

2. 修改B.com的跳转逻辑

替换表单自动提交为延迟的location.assign，简化逻辑同时保留历史条目：

<head>
  <title>Domain B page 1</title>
  <script>
    function goToC() {
      console.log("Redirecting to the C page...");
      setTimeout(() => {
        window.location.assign("https://C.com");
      }, 100);
    }
  </script>
</head>

<body>
  <h1>Domain B page 1</h1>
  <button onclick="goToC()">Click here to go to domain C</button>

  <script>
    goToC();
  </script>
</body>

原理说明 #

100ms的延迟足够浏览器完成当前页面的历史记录写入，避免被自动跳转合并。修改后历史栈会保留完整访问序列：A.com/index → A.com/page2.html → B.com → C.com，点击返回按钮时会依次回溯到上一个页面。

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