问题描述
出于某种原因，以下代码导致页面历史记录被擦除，我无法弄清楚原因。我有两个按钮，只需使用 history.pushState() 更改 URL。按钮 1 将查询参数 num 设置为 1，按钮 2 将其设置为 2。此外，如果您导航回带有 num=1 的页面，它将打开一个确认对话框，询问您是否要转到 num=2，它将再次使用 pushState()。
如果您按下按钮 1，然后按下按钮 2，您将能够按返回并单击确定并返回到 num=2 页面。您实际上可以根据需要多次执行此操作。但是，如果您在 num=2 页面上刷新，则只能按一次返回和确定。如果您再次按回，它会“跳过”num=1 页面并转到它之前的页面，从而有效地擦除历史记录并离开网站。
该问题似乎与对 confirm() 的调用有关。如果我不使用 confirm()，而是创建自己的对话框，它似乎工作得很好。
问题：
- 这是为什么？为什么刷新会改变后退按钮的行为？
- 如何让它在刷新前和刷新后表现得像它一样？
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="myClick(1)">1</button>
<button onclick="myClick(2)">2</button>
<script>
function myClick(num) {
const url = location.origin + location.pathname + '?num=' + num
history.pushState({},null,url)
}
window.addEventListener('popstate',function() {
if (location.href.endsWith('1')) {
if (confirm('Click OK to go to 2')) {
const url = location.origin + location.pathname + '?num=' + 2
history.pushState({},url)
}
}
})
</script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）