popstate

Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!

Das popstate Event wird gefeuert wenn sich der aktive Eintrag des Verlaufs ändert. Falls der zu aktivierende Eintrag des Verlaufs mit einem Aufruf von history.pushState() erstellt oder mit einen Aufruf von history.replaceState() verändert wurde, dann beinhaltet die popstate Eventeigenschaft state eine Kopie von dem Zustandsobjekt des Verlaufeintrags.

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 Schreibgeschützt EventTarget The browsing context (window).
type Schreibgeschützt DOMString The type of event.
bubbles Schreibgeschützt Boolean Whether the event normally bubbles or not.
cancelable Schreibgeschützt Boolean Whether the event is cancellable or not.
state Schreibgeschützt any The current history entry's state object (if any).

Browser compatibility

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Ja) (Ja) 4.0 (2) 10.0 [3] (Ja) (Ja)[1]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0[2] (Ja) 4.0 (2) 10.0 (Ja) (Ja)[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().

See Also