为什么 history.replaceState() 在 history.go() 方法之后不起作用？

Question

这是一个例子javascript代码

function history() {
   window.history.pushState('','','#page1');
   window.history.pushState('','','#page2');
   window.history.pushState('','','#page3');
   window.history.go(-1);
   window.history.replaceState('','','#replaced');
}
// expected result in url is www.somewhere.com/#replaced
// but result is /#page2

实际上，我想导航到第一页并替换 history.state

有解决这个问题的办法吗？

Answer 1

因为history.go()方法是异步的。 MDN 上的文档是这样说的：

This method is asynchronous. Add a listener for the popstate method in order to determine when the navigation has completed.

因此 replaceState 在 执行之前 go(-1) 完成。这就是导致该行为的原因。

结合使用popstate事件和历史API返回并替换正确的状态。每当您返回已推送到历史记录集合的状态时，都会触发 popstate 事件。使用 history.go(-1)、history.back() 或按浏览器中的后退按钮都会触发它。

如果你说你想回到第一个页面，那么将.go()值设置为-2，因为你想要回到历史上的两个地方。

在事件侦听器中检查您当前所在位置的 location.hash 值。这将让您知道您是否到达了正确的页面。然后使用replaceState正确设置状态。

window.addEventListener('popstate', function(event) {
  if (window.location.hash === 'page1') {
    window.history.replaceState('','','#replaced');
  }
});

window.history.pushState('','','#page1');
window.history.pushState('','','#page2');
window.history.pushState('','','#page3');
window.history.go(-2);

为什么 history.replaceState() 在 history.go() 方法之后不起作用？

why does history.replaceState() not work after history.go() method?

javascript

web-applications

browser-history