如何正确使用 pushState、replaceState 和 popState？

Question

我正在尝试使用历史 API，但无法按预期工作。我看过几个例子，但它们似乎都做错了。也就是说，这个流程没有按预期工作：

1. 在新页面调用 pushState
2. 在 popState 上加载所需页面

我发现 #2 的 URL 未修改为旧状态（在 Firefox 中测试）。除非我再次调用 pushState 或 replaceState，否则 URL 将保持在原来的位置。我还发现不知何故第一页最终在浏览器的历史记录中重复了（按住不放我可以看到它）。

究竟应该如何使用历史记录，以便后退/前进/重新加载都像传统的页面流一样工作？

Answer 1

我遇到的问题与在页面中使用 iframe 有关。帧位置的每次更改都会创建一个新的历史条目，其中包含所需历史的消息。为了防止这种情况，必须替换 iframe 位置，而不是分配一个新位置。

document.getElementById('content_frame').contentWindow.location.replace( new_path )

Location.replace 不创建历史条目。