我目前正在用 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”页面似乎由于某种原因被重复了。
这里出了什么问题以及如何修复我的错误?
最佳答案
我解决了我的问题,我需要在当前页面(example.com)上的 .pushState()
之前添加一个 .replaceState()
。
并将 window.onpopstate
函数移动到正在调用的页面 (example.com/menuitem)。
window.history.replaceState({ page:"http://example.com/" },"", "example.com");
我通过尝试和错误得到了这个答案。我希望这对其他人有帮助。
关于JavaScript历史记录错误: Going back seems broken,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28540372/