如何阻止iframe src变更触发history.pushState及避免浏览器记录该历史

我之前也碰到过一模一样的问题——用AlpineJS动态切换iframe的src时，浏览器总会把每一次切换都塞进历史记录里，点后退按钮的时候不是回到上一个页面，而是来回跳iframe的内容，特别闹心。后来折腾出两个靠谱的解决办法，分享给你：

• 方法一：用iframe内部的location.replace()替代直接修改src属性
  直接绑定src属性的话，浏览器默认会把每一次src变更当成独立的导航操作，自然就会往历史栈里加条目。我们可以换个思路，不直接改src，而是通过JS让iframe内部用replace方式跳转，这样就不会在父页面的历史里留下痕迹。
  你可以把代码改成这样：

  <iframe x-ref="myIframe"></iframe>
  
  <script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('iframeController', () => ({
      iframeSrc: '你的初始URL',
      init() {
        // 初始化加载初始地址
        this.$refs.myIframe.contentWindow.location.replace(this.iframeSrc);
      },
      updateIframeSrc(newSrc) {
        this.iframeSrc = newSrc;
        // 用replace方式跳转，不新增历史记录
        this.$refs.myIframe.contentWindow.location.replace(newSrc);
      }
    }));
  });
  </script>
  

  每次更新地址时，iframe内部用replace导航，父页面的历史栈就不会新增条目了。不过要注意，如果iframe加载的是跨域内容，这种方法会因为浏览器的跨域限制无法执行，这时候就需要用第二种方法。

• 方法二：修改src后用history.replaceState覆盖历史记录
  如果你还是想保留x-bind:src的写法，那可以在src变更后，立即调用history.replaceState覆盖当前的历史记录，把它替换成变更前的状态，这样就不会留下新的历史条目。
  代码示例如下：

  <iframe :src="iframeSrc" x-on:load="handleIframeLoad"></iframe>
  
  <script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('iframeController', () => ({
      iframeSrc: '你的初始URL',
      prevHistoryState: null,
      init() {
        // 记录初始的历史状态
        this.prevHistoryState = window.history.state;
      },
      updateIframeSrc(newSrc) {
        // 先记录当前的历史状态
        this.prevHistoryState = window.history.state;
        this.iframeSrc = newSrc;
      },
      handleIframeLoad() {
        // iframe加载完成后，替换当前历史记录为之前的状态
        if (this.prevHistoryState) {
          window.history.replaceState(this.prevHistoryState, '', window.location.href);
        }
      }
    }));
  });
  </script>
  

  这里利用iframe的load事件，在内容加载完成后把当前历史记录替换成变更前的状态，这样浏览器的历史栈就不会新增多余的条目了。

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