如何让通过location.href自动跳转的页面支持浏览器返回按钮返回原页面？

我完全理解你的困扰——脚本自动触发的跳转经常会和浏览器的历史栈机制“打架”，导致返回按钮失效。核心问题确实是浏览器对非用户主动触发的跳转会有特殊处理，比如页面未完全加载就跳转时，可能不会把原页面（1.html）正常存入历史栈。下面给你两个可行的解决方案：

方案1：等页面加载完成后再执行跳转 #

浏览器需要一点时间把当前页面（1.html）写入历史记录，如果你的跳转触发得太早（比如页面DOM还没加载完），就会导致历史记录丢失。我们可以把跳转逻辑放在页面加载完成的事件里，确保1.html已经被浏览器记录：

修改后的1.html代码：

<!DOCTYPE html>
<html>
  <script>
    // 等DOM结构完全加载后再启动定时器
    document.addEventListener('DOMContentLoaded', () => {
      let time = 0;
      const timer = setInterval(() => {
        if (time === 500) {
          clearInterval(timer); // 记得清理定时器，避免内存泄漏
          location.href = '/2.html';
        }
        time++;
      }, 1);
    });
  </script>
</html>

这样做后，浏览器会先把1.html加入历史栈，再执行跳转。此时历史栈结构是[1.html, 2.html]，点击返回按钮就能正常回到1.html了。

方案2：手动用pushState加固历史记录 #

如果方案1在某些浏览器里还是有问题，可以主动给1.html添加一条历史状态，强制浏览器把它存入历史栈。注意：pushState是给当前页面添加一个历史状态（不是新页面），但能确保原页面的历史记录不丢失：

修改后的1.html代码：

<!DOCTYPE html>
<html>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      let time = 0;
      const timer = setInterval(() => {
        if (time === 500) {
          clearInterval(timer);
          // 先给当前页面（1.html）添加一条历史状态
          history.pushState({}, document.title, window.location.href);
          // 再执行跳转
          location.href = '/2.html';
        }
        time++;
      }, 1);
    });
  </script>
</html>

这时历史栈会变成[1.html（初始状态）, 1.html（pushState状态）, 2.html]。点击返回按钮时，会回到1.html的pushState状态（页面内容和初始1.html完全一致），完美解决问题。

为什么你之前的pushState尝试无效？ #

大概率是调用时机不对——比如你在页面还没加载完成时就调用了pushState，或者没清理定时器导致逻辑重复触发。把代码放在DOMContentLoaded事件里，再加上清理定时器，就能解决这个问题。

另外提醒一句：一定要清理setInterval定时器！否则即使页面跳转了，定时器可能还在后台跑，造成不必要的内存泄漏。

备注：内容来源于stack exchange，提问作者DennisYun