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). |
Compatibilité des navigateurs
Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !
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 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()
.