Get history state object after setting with History API pushState

Question

How do I get the state object back that I have set with HTML5 History API:

var stateObj = { foo: "bar" };
history.pushState(stateObj, null, url);

I am trying:

$(window).bind('popstate', function(event) {
    alert(event.state);
});

It comes back with undefined.

Thanks!

I'm seeing the same problem in Chrome - did you ever resolve it? — Bobby Jack, Sep 10 '12 at 12:59

score 6 · Answer 1 · edited Apr 16 '12 at 13:43

6

I just needed to get the event.state from the window.

 alert(window.event.state);

edited Apr 16 '12 at 13:43

Bill the Lizard

369,957
201
546
842

answered Sep 15 '11 at 09:45

score 2 · Answer 2 · answered Sep 15 '11 at 09:36

As its name implies the pop state event only fires when an event is popped from the history, not when an entry is pushed into the history.

In your example if you have two history entries, the initial entry that happens when the page loads from the server, and a second which is the one you have just pushed.

When you press the browsers back button the state that you are getting in the event is the original entry, from when the page loaded. The popstate event gives you the state that you are currently on, not the state that was just popped from the stack. Slightly confusing.

In your example if you pushed two entries into the stack, both with state data, and then hit the back button, your event handler should show you the state data of the first state you pushed into the history stack.

Yep, I understand that the if I am traversing to the initial page the state will be null. But this is happening for all traversals. I know pushState is firing as it is changing the URL on my ajax requests. But when I got back to a state that I have pushed I still get nothing. — , Sep 15 '11 at 09:40
Maybe put together a jsFiddle to recreate the issue. Using similar code I don't seem to be able to re-create the problem. — Oliver Nightingale, Sep 15 '11 at 11:30

score 1 · Answer 3 · edited May 23 '17 at 12:09

This appears to be the same problem which is discussed in the question jQuery bind popstate event not passed and answered by KSev

To summarize, since you are using jQuery, you're getting a normalized jQuery event object. The jQuery way to access the original event object is via the originalEvent property. Therefore, you code could be rewritten as:

$(window).bind('popstate', function(event) {
  alert(event.originalEvent.state);
});

You can find some additional details and examples here: stackoverflow.com/questions/7860960/popstate-returns-event-state-is-undefined

Get history state object after setting with History API pushState

3 Answers3