popstate returns event.state is undefined

Question

I am learning about history in HTML5, in this example (open the JavaScript browser console to see error) the event.state.url returns:

Uncaught TypeError: Cannot read property 'url' of undefined

Look and help: http://jsfiddle.net/un4Xk/

Answer 1

event is the jQuery event object, not the DOM one.

To access the DOM event object, use event.originalEvent: http://jsfiddle.net/pimvdb/un4Xk/1/.

var state = event.originalEvent.state;

Remember that the state is only defined when the new state has data, so it is not available when clicking and then going back to the initial state:

1. initial state
2. link to state 1
3. back button to initial state (no data available)

It is, however, available when clicking, clicking another time and then going back:

1. initial state
2. link to state 1
3. link to state 2
4. back button to state 1 (data available)