Question

以下代码应该引发“1”警报，但不执行任何操作。

window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1})
history.back()

小提琴：http://jsfiddle.net/WNurW/2/

有什么想法吗？

Answer 1

你的代码不会导致popstate，因为pushstate命令告诉你现在在哪个页面。

window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1});
history.pushState({a: 2});
history.back()

以上代码可以使用继承人：http://jsfiddle.net/WNurW/8/

HTML5 History

如上图所示：
（1）在这里您输入了页面或小提琴，然后您想要pushState，这将添加一个到历史链的新链接。

（2）当您按下状态时，您将再添加一次回溯到历史记录，但它也会将“历史记录”中的当前位置移动到新状态。所以回去，不会给你你认为你得到的历史状态，它会给你前一个。

（3）您必须转到“新”页面或推送其他历史记录状态才能返回您在步骤（2）中创建的状态。

Answer 2

为了强制触发事件，您需要在同一文档的两个历史记录条目之间导航并调用正确的历史记录方法。
仅调用history.pushState()或history.replaceState()，就不会触发popstate事件。另外，请检查history.pushState()参数。

所以你可以这样做：

window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1}, "")
history.back() //add history entry
history.back() //add history entry
history.go(1)

这里有更详细的内容：）

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
</head>
<body>

<script type="application/x-javascript">

function changeState(){
    history.pushState({page: 1}, "page title", "?page=1");
    history.pushState({page: 2}, "other title ", "?page=2");
    //replaceState: Updates the most recent entry on the history stack
    history.replaceState({page: 3}, "title 3", "?page=3");
    history.back(); 
    history.back(); 
    history.go(2); 
}

function showState(event){
    var restultState = JSON.stringify(event.state)
    alert("location: " + document.location + ", state: " + restultState);
}

window.onpopstate = showState;
changeState();

</script>
</body>
</html>

Answer 3

在推送新状态之前，您必须修改当前状态。因此，当您返回第一个州时，您将获得数据：

// updating the current state    
window.history.replaceState({a: 1}, "First State", window.location.pathname);
// setting the new state
window.history.pushState({ },"Secound State", window.location.pathname);
// getting the data back
window.onpopstate = (event) => {
  alert(event.state.a); // Displays "1";
}

Popstate - 将弹出状态传递给事件处理程序

3 个答案: