Javascript历史错误：回去似乎坏了答案

【问题标题】：Javascript history error: Going back seems brokenJavascript历史错误：回去似乎坏了
【发布时间】：2015-02-16 11:25:13
【问题描述】：

我目前正在用 javascript 处理浏览器历史记录，但我几乎拥有了我想要的东西。
但是我遇到了一个巨大的错误，让我解释一下情况：

我有一个菜单，当按下一个菜单项时，会执行以下代码：

$("#content").load("http://example.com/menuitem");
window.history.pushState({ page:"http://example.com/menuitem" },"", "http://example.com/menuitem");
document.title = 'Menu item';

我还有一个空的onbeforeunload 函数，所以浏览器的后退、前进和历史选项按预期工作。而且我有一个 onpopstate 函数，但是我没有看到他在做什么，所以不知道我是否真的需要他。

window.onbeforeunload = function(){
};

window.onpopstate = function(e){
    console.log('onpopstate was called');
    if(e.state){
        window.location.href = e.state.page;
    }
};

现在，我的巨大错误：我正在测试如下：

在地址栏中输入“stackoverflow.com”
在地址栏中输入“example.com”
点击菜单项
在地址栏中输入“google.com”
通过浏览器后退按钮返回，直到访问 stackoverflow.com

当我返回时，我第一次按预期访问了 example.com/menuitem，但第二次返回时，我再次访问了完全相同的页面，而不是访问 example.com，即我想要的是。从这一刻起，当我查看历史记录时，我的“example.com/menuitem”页面似乎由于某种原因被重复了。

这里出了什么问题，我该如何解决我的错误？

【问题讨论】：

所以如果我理解正确的话，你做了两次测试，第二次返回时，序列是google -> stackoverflow而不是google -> example.com -> stackoverflow？
@Raad，不，因此序列始终是google -> example.com/menuitem -> example.com/menuitem -> etc.（连续同一页），而我想关注：google -> example.com/menuitem -> example.com -> stackoverflow。

标签： javascript history back

【解决方案1】：

我解决了我的问题，我需要在当前页面 (example.com) 上的 .pushState() 之前添加一个 .replaceState()。
并将window.onpopstate 函数移动到被调用的页面（example.com/menuitem）。

window.history.replaceState({ page:"http://example.com/" },"", "example.com");

我通过尝试和错误得到了这个答案。我希望这对其他人有帮助。

【讨论】：