0

我一直在玩 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 。它在第二个 back() 中从状态 3 跳转到状态 1。

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

4

1 回答 1

3

那是因为您使用replaceState了第三个示例。

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

所以在history.replaceState({page: 3}, "title 3", "?page=3");历史?page=2上不存在的那个之后......

引用replaceState() 方法

history.replaceState()history.pushState()除了replaceState()修改当前历史条目而不是创建一个新条目之外，其操作完全一样。

于 2013-06-23T21:47:57.523 回答