JavaScript历史记录错误: 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;
    }
};

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

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

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

这里出了什么问题以及如何修复我的错误？

Answer 1

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

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

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