Popstate - 将弹出状态传递给事件处理程序
[英]Popstate - passing popped state to event handler
问题描述
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? 有任何想法吗？
3 个解决方案
解决方案1
12 已采纳 2013-07-23 07:38:38
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）在这里您输入了页面或小提琴，然后您想要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. （2）当您按下状态时，您将再添加一次回溯到历史记录，但它也会将“历史记录”中的当前位置移动到新状态。 So going back, will not give you the history state you think you are getting, it will give the previous one. 所以回去，不会给你你认为你得到的历史状态，它会给你前一个。
(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）中创建的状态。
解决方案2
5 2013-07-23 05:47:45
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 popstate event. 只调用history.pushState（）或history.replaceState（） ，它不会触发popstate事件。 Also, check the history.pushState() params. 另外，请检查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>
解决方案3
0 2018-05-30 02:14:59
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";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.