Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

popstate returns event.state is undefined

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/

like image 621
Caio Tarifa Avatar asked Oct 22 '11 16:10

Caio Tarifa


People also ask

What is a Popstate event?

PopStateEvent is an interface for the popstate event. A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document. If the history entry being activated was created by a call to history. pushState() or was affected by a call to history.

How do you fire a Popstate event?

The popstate event of the Window interface is fired when the active history entry changes. ... The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history. back() or history. forward() in JavaScript).

Does pushState trigger Popstate?

html - history. pushState does not trigger 'popstate' event - Stack Overflow. Stack Overflow for Teams – Start collaborating and sharing organizational knowledge.

What is the purpose of the event Window Onpopstate?

The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.


1 Answers

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)
like image 79
pimvdb Avatar answered Oct 17 '22 14:10

pimvdb