popstate returns event.state is undefined

jquery html history pushstate
Caio Tarifa picture Caio Tarifa · Oct 22, 2011 · Viewed 20.5k times · Source

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

pimvdb picture pimvdb · Oct 22, 2011

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)

Related questions

When the back button triggers popState how can I prevent a page refresh?

I am trying to modify the content in my page without a reload. Currently my code reads: window.onpopstate = function(event){ // Ajax Request the Page and replace content with new content }; This works when I push a state then trigger …

Read More
window bind POPSTATE

Given the following: $(window).bind("popstate", function() { alert('popstate'); }); On first load, the alert fires with FireFox and Chrome but not Safari. Why is that? Anyone else seen this and know how to best solve for this?

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More