I'm playing with the history object for the first time. I have the following code which I've been testing in chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
console.log(event.state);
});
function showbox()
{
document.getElementById('box').style.display = 'block';
history.pushState({somethinggoeshere:'but what?'}, 'I put text here, but how do i verify the browser has received it?', '?showbox=true');
}
</script>
</head>
<body>
<a onclick="showbox();">Show box</a>
<div id="box" style="background:red; height:100px; display:none;"></div>
</body>
</html>
When i click on the link Show box, a red box appears. When I click on the back button in the chrome browser window, then look at console.log, event.state is null. Why is it null? Didn't I populate this with something with history.pushState?
I'm playing with the history object for the first time. I have the following code which I've been testing in chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
console.log(event.state);
});
function showbox()
{
document.getElementById('box').style.display = 'block';
history.pushState({somethinggoeshere:'but what?'}, 'I put text here, but how do i verify the browser has received it?', '?showbox=true');
}
</script>
</head>
<body>
<a onclick="showbox();">Show box</a>
<div id="box" style="background:red; height:100px; display:none;"></div>
</body>
</html>
When i click on the link Show box, a red box appears. When I click on the back button in the chrome browser window, then look at console.log, event.state is null. Why is it null? Didn't I populate this with something with history.pushState?
Share Improve this question asked Nov 29, 2012 at 19:32 learningtechlearningtech 33.8k87 gold badges266 silver badges443 bronze badges2 Answers
Reset to default 7When you use pushState, you are pushing the "current state" of the page (the browser doesn't actually save the state of the page. It just associates the object passed as the 1st parameter to pushState with the page in history) onto the browser's history stack. When you browse to that page in the history stack, the object you pushed will appear (in onpopstate).
(Note: you can pass anything that can be JSON.stringifyed to pushState.)
You went back to a page in the history, but that page wasn't added with pushState, so it has no "state".
Try to push the "forward" button in your browser after clicking "back". You will see that event.state is not null then.
So, the object you pass is linked to the page that was pushed into the history stack, and you'll only see it when you visit that page in the history.
This is an idea for thinking.
I have got the same problem working with Dart programming language.PopStateEvent listener provide null in the event state parameter.
I have solved this issue by using HashChangeEvent listener.
After press "Back" button in the browser the HashChangeEvent listener is fire, providing useful information.
window.onHashChange.listen((event) {
var e = event as HashChangeEvent;
var newUrl = e.newUrl;
var oldUrl = e.oldUrl;
// please, navigate to the "state" (old history location)
});