Question

我一直在玩window.history.pushState和onpopstate，但在我看来，按下后退跳回两个状态，跳过一个。

有关示例，请参阅https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate?redirectlocale=en-US&redirectslug=DOM%2Fwindow.onpopstate：

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

History.js似乎显示相同的行为。请参阅“直接使用History.js”部分中的https://github.com/browserstate/history.js。它在第二个后面（）中从状态3跳到状态1.

那为什么会有这种行为或者我错过了什么？

Answer 1

这是因为你使用replaceState作为第三个例子。

replaceState顾名思义替换当前状态..它不会添加新状态。

所以history.replaceState({page: 3}, "title 3", "?page=3");历史记录中不存在?page=2之后......

引用The replaceState() method

history.replaceState()的操作与history.pushState()完全相同，只是replaceState()修改了当前的历史记录条目，而不是创建新条目。

为什么window.history.back（）会跳回两个状态？

1 个答案: