onpopstate is an event handler for the popstate event on the window.

A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document. If the activated history entry was created by a call to history.pushState(), or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

Note: calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari (prior to 10.0) have always emitted a popstate event on page load, but Firefox didn't for a long time; it does in modern versions.

Syntax

window.onpopstate = funcRef;
  • funcRef is a handler function.

The popstate event

For example, a page at http://example.com/example.html running the following code will generate alerts as indicated:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

Note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired, when we activate that entry after the second call to history.back().

Specification

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

See also

Document Tags and Contributors

Last updated by: fscholz,