Javascript history error: Going back seems broken

Question

我目前正在使用 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;
    }
};

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

• 在地址栏中输入 'whosebug.com'
• 在地址栏中输入 'example.com'
• 单击菜单项
• 在地址栏中输入 'google.com'
• 通过浏览器后退按钮返回，直到到达 whosebug.com

当我返回时，第一次进入示例。com/menuitem 符合预期，但第二次返回时，我再次进入完全相同的页面，而不是进入example.com，这就是我想要的。从这一刻起，当我查看历史记录时，我的 'example.com/menuitem' 页面似乎由于某种原因重复了。

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

Answer 1

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

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

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