History.pushState does not raise a popstate event

Question

Why

$(function () { $(window).bind('popstate', function () {alert('pop');}); window.history.pushState(null, '', '/foo'); }); 

does not report pop ?

Note. Testing on the latest chrome.

-

According to MDN :

The popstate event is dispatched to the window each time an active history record changes. If an activated history record was created by a call to pushState or affected by a call to replaceState, the state property of the popstate event contains a copy of the state object of the history record.

So why pushState n't my pushState event?

Answer 1

The paragraph you are referring to is a bit ambiguous. Considering example on the same page, it’s clear that popstate only starts when the user clicks the back button, and not when the script calls pushState() ,

Answer 2

You can manually fire the popstate event on window every time you call history.pushState() .

 history.pushState(state, '', url); var popStateEvent = new PopStateEvent('popstate', { state: state }); dispatchEvent(popStateEvent); 

Answer 3

You are reading an MDN manual page that is not intended for regulatory action.

Instead of MDT, consider the “documentation page” for WindowEventHandlers.onpopstate :

Note that simply calling history.pushState () or history.replaceState () does not raise a popstate event. The popstate event is triggered only by a browser action , such as clicking the back button (or calling history.back () in JavaScript). An event is fired only when the user moves between two history entries for the same document.

Answer 4

My decision:

 var url = "http://awesome.website.net/route/to/paradise"; window.history.pushState({}, "", url); window.history.pushState({}, "", url); // yes twice window.history.back(); 

This will result in programmatic navigation through the "popstate" event and the HTTP request.

Answer 5

The document https://developer.mozilla.org/en-US/docs/Web/Events/popstate says:

Note that simply calling history.pushState() or history.replaceState() will not raise the popstate event. The popstate event will be triggered by a browser action, such as a click on the Back or Forward button (or a call to history.back() or history.forward() in JavaScript).

Answer 6

I also came across this ... I think the event only fires if you have something at the top level of your data object other than the previous state.

Try the following:

 var data = {rand: Math.random()}; window.history.pushState(data, '', '/foo'); 

Answer 7

I don’t know exactly what you are trying to achieve, but if you just want your popState event handler to start, you can simply extract it from the function, as shown below:

 function popStateHandler(event) { // Event handling Code here } window.onpopstate = popStateHandler; 

Then you can just call your popStateHandler after push pushate.