Window : évènement pageshow
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement pageshow de l'interface Window est émis lorsque le navigateur navigue vers un nouveau document.
Cela inclut :
- Chargement initial de la page.
- Navigation vers la page depuis une autre page dans la même fenêtre ou onglet.
- Restauration d'une page gelée sur les systèmes d'exploitation mobiles.
- Retour à la page en utilisant les boutons « précédent » ou « suivant » du navigateur (y compris lorsqu'elle est restaurée depuis le bfcache).
- Ouverture d'une page dans un onglet en arrière-plan.
- Prérendu d'une page, même avant qu'elle ne soit activée.
Attention :
Malgré son nom, l'évènement pageshow ne se déclenche pas lorsque la page est réellement affichée à l'utilisateur·ice. Par exemple, elle peut être ouverte dans un onglet en arrière-plan ou pré-rendue. Si vous souhaitez réagir à l'affichage de la page à l'utilisateur·ice, utilisez les évènements suivants :
pagereveal: Émis lorsqu'une page est rendue pour la première fois.visibilitychange: Émis chaque fois que la visibilité d'une page change.prerenderingchange: Émis lorsqu'une page pré-rendue est activée.
Note :
Lors du chargement initial de la page, l'évènement pageshow se déclenche après l'évènement load.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("pageshow", (event) => { })
onpageshow = (event) => { }
Type d'évènement
Un objet PageTransitionEvent. Hérite de Event.
Propriétés de l'évènement
PageTransitionEvent.persistedLecture seule-
Indique si le document est chargé depuis un cache.
Alias des gestionnaires d'évènements
En plus de l'interface Window, la propriété de gestionnaire d'évènement onpageshow est également disponible sur les cibles suivantes :
Exemples
Cet exemple configure des gestionnaires d'évènements pour les évènements listés dans le tableau events. Le gestionnaire, eventLogger(), enregistre le type d'évènement qui s'est produit dans la console, et inclut la valeur du drapeau persisted pour les évènements pageshow et pagehide.
JavaScript
const events = ["pagehide", "pageshow", "unload", "load"];
const eventLogger = (event) => {
switch (event.type) {
case "pagehide":
case "pageshow": {
let isPersisted = event.persisted ? "persisted" : "not persisted";
console.log(`Évènement : ${event.type} - ${isPersisted}`);
break;
}
default:
console.log(`Évènement : ${event.type}`);
break;
}
};
events.forEach((eventName) => window.addEventListener(eventName, eventLogger));
HTML
<p>
Ouvrez la console et observez la sortie lorsque vous naviguez vers et depuis
cette page. Essayez de charger de nouvelles pages dans cet onglet, puis
naviguez en avant et en arrière dans l'historique, en notant la sortie des
événements dans le journal.
</p>
Résultat
Spécifications
| Spécification |
|---|
| HTML # event-pageshow |
Compatibilité des navigateurs
Voir aussi
- L'évènement
pagehide