Window : évènement pagehide

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("pagehide", (event) => { })

onpagehide = (event) => { }

Type d'évènement

Un objet PageTransitionEvent. Hérite de Event.

Propriétés de l'évènement

PageTransitionEvent.persisted Lecture 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é du gestionnaire d'évènement onpagehide est également disponible sur les cibles suivantes :

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Notes d'utilisation

Comme les évènements unload et beforeunload, cet évènement n'est pas déclenché de manière fiable par les navigateurs, en particulier sur mobile. Par exemple, l'évènement pagehide n'est pas du tout déclenché dans le scénario suivant :

1. Un·e utilisateur·ice mobile visite votre page.
2. L'utilisateur·ice passe ensuite à une autre application.
3. Plus tard, l'utilisateur·ice ferme le navigateur depuis le gestionnaire d'applications.

Cependant, contrairement aux évènements unload et beforeunload, cet évènement est compatible avec le cache avant/arrière ^(angl.) (bfcache), donc ajouter un écouteur à cet évènement n'empêchera pas la page d'être incluse dans le bfcache.

Le meilleur évènement à utiliser pour signaler la fin de la session d'un utilisateur est l'évènement visibilitychange. Dans les navigateurs qui ne prennent pas en charge visibilitychange, l'évènement pagehide est la meilleure alternative.

Si vous essayez spécifiquement de détecter les évènements de déchargement de page, l'évènement pagehide est la meilleure option.

Voir le guide de l'API Page Lifecycle ^(angl.) pour plus d'informations sur la manière dont cet évènement se rapporte aux autres évènements du cycle de vie de la page.

Exemples

Dans cet exemple, un gestionnaire d'évènements est établi pour surveiller les évènements pagehide et effectuer un traitement spécial si la page est en cours de persistance pour une réutilisation éventuelle.

window.addEventListener("pagehide", (event) => {
  if (event.persisted) {
    /* la page n'est pas en train d'être supprimée, elle peut donc être réutilisée plus tard */
  }
});

Cela peut également être écrit en utilisant la propriété du gestionnaire d'évènement onpagehide sur le Window :

window.onpagehide = (event) => {
  if (event.persisted) {
    /* la page n'est pas en train d'être supprimée, elle peut donc être réutilisée plus tard */
  }
};

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'évènement pageshow
• L'API Page Lifecycle ^(angl.) fournit des recommandations sur les meilleures pratiques pour gérer le comportement du cycle de vie des pages dans vos applications web.
• PageLifecycle.js ^(angl.) : une bibliothèque JavaScript qui gère les incohérences entre navigateurs dans le comportement du cycle de vie des pages.
• Back/forward cache ^(angl.) explique ce qu'est le cache avant/arrière et ses implications pour divers événements du cycle de vie des pages.