如何避免向自身发送POST请求时生成浏览器历史记录？

看起来你遇到的情况很典型——每次点Regenerate发POST都会在浏览器历史里多一条记录，不想让用户通过后退回到上一次生成的内容，而且暂时还不想改成AJAX异步方案对吧？我有个不用大动现有逻辑的快速 workaround 可以试试：

核心思路 #

让POST请求在隐藏的iframe里完成，主页面本身不发生跳转，自然就不会新增历史记录；等iframe加载完新内容后，再把主页面的内容替换成新生成的内容，同时用你已经在用的replaceState保持URL和内容的对应性。

具体步骤 #

• 第一步：在页面里加一个隐藏的iframe，专门用来接收Regenerate的POST结果：

  <iframe id="hidden-regen-frame" style="display: none;"></iframe>
  

• 第二步：修改Regenerate按钮对应的表单，把target属性指向这个iframe的id，这样表单提交后会在iframe里加载新页面，主页面不会跳转：

  <!-- 修改后的表单 -->
  <form action="/generate" method="POST" target="hidden-regen-frame">
    <!-- 你的表单字段 -->
    <button type="submit">Regenerate</button>
  </form>
  

• 第三步：给这个iframe绑定load事件，当它加载完新的生成页面后，替换主页面的内容并更新历史状态：

  const regenFrame = document.getElementById('hidden-regen-frame');
  regenFrame.addEventListener('load', function() {
    // 这里根据你的页面结构调整，比如替换整个body或者特定内容容器
    const newGeneratedContent = regenFrame.contentDocument.body.innerHTML;
    document.body.innerHTML = newGeneratedContent;
    
    // 和你原来的逻辑保持一致，替换当前历史状态，确保刷新时用GET就能拿到正确内容
    window.history.replaceState(null, null, window.location.href);
    
    // 注意：如果新页面里有需要绑定的交互事件（比如Regenerate按钮的逻辑），
    // 这里要重新初始化这些事件，不然新内容的交互会失效
  });
  

注意事项 #

• 因为是同域请求，iframe和主页面之间的内容访问没有跨域限制，完全可行；
• 如果你的页面有复杂的脚本或组件，替换内容后记得重新初始化相关逻辑，保证新页面的交互正常；
• 这只是临时的过渡方案，后续改成AJAX异步更新会更顺滑，但当前版本用这个方法完全能解决历史记录的问题。

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