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
| Propriété | Type | Description |
|---|---|---|
target Lecture seule |
EventTarget |
The browsing context (<code>window</code>). |
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). |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Supportbasique | (Oui) | 4.0 (2) | 10.0 | (Oui) | (Oui)[1] |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support basique | 3.0[2] | 4.0 (2) | 10.0 | (Oui) | (Oui)[1] |
[1] L'implémentation est supportée de façon limitée.
[2] L'implémentation sous Android 2.2 et 2.3 était buggée.
Exemple
Une page https://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: https://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: https://example.com/example.html, state: null
history.go(2); // Logs "location: https://example.com/example.html?page=3, state: {"page":3}
Notez que même si l'entrée d'historique originelle (pour https://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().