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

Question

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

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

我发现的是，对于＃2，URL未被修改为旧状态（在Firefox中测试）。除非我再次调用pushState或replaceState，否则URL会保持原样。我也发现，不知何故，第一页最终会在浏览器的历史记录中重复出现（按住我可以看到它）。

历史应该如何使用，以便Back / Forward / Reload像传统的页面流一样工作？

Answer 1

我在页面中使用iframe时遇到的问题。帧的位置的每次改变都创建一个新的历史条目，该条目具有所需的历史记录。要防止这种情况，必须替换iframe位置而不是分配新位置。

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

Location.replace不会创建历史记录条目。