W3cubDocs

popstate

The popstate event is fired when the active history entry changes. If the history entry being activated 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 that just calling history.pushState() or history.replaceState() won't trigger a popstate event. 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).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

General info

Specification: HTML5
Interface: PopStateEvent
Bubbles: Yes
Cancelable: No
Target: defaultView
Default Action: None

Properties

Property	Type	Description
`target` Read only	`EventTarget`	The browsing context (`window`).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`Boolean`	Whether the event normally bubbles or not.
`cancelable` Read only	`Boolean`	Whether the event is cancellable or not.
`state` Read only	any	The current history entry's state object (if any).

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	4.0 (2)	10.0 [3]	(Yes)	(Yes)[1]

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0[2]	(Yes)	4.0 (2)	10.0	(Yes)	(Yes)[1]

[1] The implementation has limited support.

[2] The implementation in Android 2.2 and 2.3 was buggy.

[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report.

Example

A page at http://example.com/example.html running the following code will generate logs as indicated:

window.onpopstate = function(event) {
  console.log("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(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2);  // Logs "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().

Related Events