popstate event handler seems not to work

Question

I'm having a problem with a 'popstate' event handler, this is my code:

window.addEventListener("popstate", function (event){
    if (event.state) {
        alert('abc')
    }
});

// The data object is arbitrary and is passed with the popstate event.
var dataObject = {
    createdAt: '2011-10-10',
    author: 'donnamoss'
};

var url = '/posts/new-url';
history.pushState(dataObject, document.title, url);

I expected this code will pop up an alert box when it's executed but, nothing happens.

Is there anything wrong here?

Thank you.

Answer 1

pushState do not trigger the popstate event, only clicking back / forward button (or use backspace) or invoking history.back() / history.go(n) would trigger this event.

Also, in webkit browsers, a popstate event would be triggered after page's onload event, but Firefox and IE do not have this behavior.

Answer 2

No it will not,

As per MDN documentation

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on the back button (or calling history.back() in JavaScript).

Again as per this question the popstate event is not triggered in Chrome when you call pushState().