Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

window.onpopstate

Résumé

Un gestionnaire d'évènement pour l'évènement popstate de la fenêtre.

L'évènement popstate est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant history.pushState() ou a été modifiée en appelant history.replaceState(), la propriété state de l'évènement popstate contient une copie de l'objet d'entrée de l'historique.

Sachez qu'appeler history.pushState() ou history.replaceState() ne déclenchera pas l'évènement popstate. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler history.back(), en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.

Syntaxe

window.onpopstate = funcRef;
  • funcRef est une référence à une fonction.

L'évènement popstate

Par exemple, une page à l'adresse http://example.com/example.html exécutant le code suivant générera les alertes suivantes:

window.onpopstate = function(event) {
  alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "titre 1", "?page=1");
history.pushState({page: 2}, "titre 2", "?page=2");
history.replaceState({page: 3}, "titre 3", "?page=3");
history.back(); // affiche "adresse: http://example.com/example.html?page=1, état: {"page":1}"
history.back(); // affiche "adresse: http://example.com/example.html, état: null
history.go(2);  // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3}

Même si l'entrée originelle (de http://example.com/example.html) n'a aucun objet d'état associé, l'évènement popstate est toujours déclenché lorsque l'entrée est activée après un deuxième appel à history.back().

Spécification

Lire également