NavigationActivation

Baseline 2026

Nouvellement disponible

Depuis janvier 2026, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Voir la compatibilité complète
En savoir plus

L'interface NavigationActivation de l'API Navigation représente une navigation inter-documents récente. Elle contient le type de navigation ainsi que les entrées d'historique des documents sortants et entrants.

Cet objet est accessible par les propriétés PageSwapEvent.activation et Navigation.activation. Notez que, dans chaque cas, le NavigationActivation représente une navigation différente :

Navigation.activation représente des informations sur la navigation vers la page actuelle.
PageSwapEvent.activation représente des informations sur la navigation vers la page suivante.

Propriétés d'instance

entry Lecture seule: Contient un objet NavigationHistoryEntry représentant l'entrée d'historique pour le document entrant (« to ») dans la navigation. Cela équivaut à la propriété Navigation.currentEntry au moment où le document entrant a été activé.
from Lecture seule: Contient un objet NavigationHistoryEntry représentant l'entrée d'historique pour le document sortant (« from ») dans la navigation.
navigationType Lecture seule: Contient une chaîne de caractères indiquant le type de navigation.

Exemples

window.addEventListener("pagereveal", async (e) => {
  // Si l'entrée d'historique « from » n'existe pas, retourner
  if (!navigation.activation.from) return;

  // Ne s'exécute que si une transition de vue active existe
  if (e.viewTransition) {
    const depuisUrl = new URL(navigation.activation.from.url);
    const urlActuelle = new URL(navigation.activation.entry.url);

    // Passage de la page de profil à la page d'accueil
    // ~> Définir les noms VT sur l'élément de liste pertinent
    if (estPageProfil(depuisUrl) && estPageAccueil(urlActuelle)) {
      const profil = extraireNomProfilDepuisUrl(depuisUrl);

      // Définit les valeurs view-transition-name sur les éléments à animer
      document.querySelector(`#${profil} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profil} img`).style.viewTransitionName =
        "avatar";

      // Supprime les noms après que les instantanés ont été pris
      // afin d'être prêt pour la navigation suivante
      await e.viewTransition.ready;
      document.querySelector(`#${profil} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profil} img`).style.viewTransitionName =
        "none";
    }

    // Passage à la page de profil
    // ~> Définit les noms VT sur le titre principal et l'image
    if (estPageProfil(urlActuelle)) {
      // Définit les valeurs view-transition-name sur les éléments à animer
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Supprime les noms après que les instantanés ont été pris
      // afin d'être prêt pour la navigation suivante
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

Note : Voir la Liste des membres de l'équipe Chrome DevRel ^(angl.) pour la démonstration en direct dont ce code est tiré.

Spécifications

Spécification
HTML # navigationactivation

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 13 sept. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu