popstate
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
- 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é :
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