popstate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'événement popstate est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à history.pushState() ou a été affectée par un appel à history.replaceState(), la propriété state de l'événement popstate contient une copie de l'objet state de l'entrée d'historique.

Notez qu'un appel à history.pushState() ou history.replaceState() n'exécutera pas l'événement popstate. L'événement popstate est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler history.back() en JavaScript).

Les navigateurs ont tendance à gérer l'événement popstate différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement popstate lors du chargement de la page, contrairement à Firefox.

Informations générales

Specification

HTML5

Interface

PopStateEvent

Bubbles

Yes

Cancelable

No

Target

defaultView

Action par défaut

None

Propriétés

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

Exemple

Une page http://example.com/example.html exécutant le code suivant génèrera un journal comme spécifié :

js
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}

Notez que même si l'entrée d'historique originelle (pour http://example.com/example.html) n'a pas d'objet state associé, un événement popstate est tout de même exécuté lorsque nous activons cette entrée au second appel à history.back().

Spécifications

Specification
HTML Standard
# event-popstate
HTML Standard
# handler-window-onpopstate

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi