javascript Popstate - 将弹出状态传递给事件处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17801614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popstate - passing popped state to event handler
提问by Lyn Headley
The following code should cause an alert of '1', but instead does nothing.
下面的代码应该会导致“1”警报，但什么也不做。
window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1})
history.back()
Fiddle: http://jsfiddle.net/WNurW/2/
小提琴：http: //jsfiddle.net/WNurW/2/
Any ideas?
有任何想法吗？
回答by André Snede Kock
Your code woudn't cause a popstate, as the pushstate command tells what page you are on NOW.
您的代码不会导致 popstate，因为 pushstate 命令会告诉您现在所在的页面。
window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1});
history.pushState({a: 2});
history.back()
The above code will work.
Heres the fiddle: http://jsfiddle.net/WNurW/8/
上面的代码会起作用。
这是小提琴：http: //jsfiddle.net/WNurW/8/
As you can see on the above picture:
(1)Here you entered the page, or the fiddle, you then want to pushState, which will add a new link to the history chain.
如上图所示：
(1)在这里你进入了页面，或者说fiddle，然后你想要pushState，这将添加一个新的链接到历史链。
(2)When you push state, you will add one more back click to the history, but it will also move the current place in "history" up to your new state. So going back, will not give you the history state you think you are getting, it will give the previous one.
(2)当您推送状态时，您将在历史记录中再添加一次后退点击，但它也会将“历史”中的当前位置移动到您的新状态。所以回去，不会给你你认为你正在得到的历史状态，它会给前一个。
(3)You have to go to a "new" page, or push another history state, to be able to go back to the state you created in step (2).
(3)您必须转到“新”页面，或推送另一个历史状态，才能返回到您在步骤 (2) 中创建的状态。
回答by felipsmartins
In order to force trigger event you needs navigates between two history entries for the same document and to call proper history method.
Calling history.pushState()or history.replaceState()just, it not will trigger popstateevent. Also, check the history.pushState()params.
为了强制触发事件，您需要在同一文档的两个历史条目之间导航并调用正确的历史方法。
只调用history.pushState()或history.replaceState()不会触发popstate事件。另外，检查history.pushState()参数。
So you can to do it:
所以你可以这样做：
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)
Here something more elaborate :)
这里有更详细的内容:)
<!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>
回答by Maikon Matheus
You have to modify the current state before push a new state. So, when you go back for the first state, you will get the data back:
您必须在推送新状态之前修改当前状态。因此，当您返回第一个状态时，您将获得数据：
// 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";
}
