Window : évènement pageswap

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

L'évènement pageswap de l'interface Window est émis lorsque vous naviguez entre des documents, lorsque le document précédent est sur le point de se décharger.

Cela est utile dans le cas des transitions de vue entre documents (MPA) pour manipuler une transition active depuis la page sortante d'une navigation. Par exemple, vous pouvez souhaiter ignorer la transition ou personnaliser l'animation de la transition sortante via JavaScript.

Il fournit également un accès au type de navigation et aux entrées d'historique des documents actuels et de destination.

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

onpageswap = (event) => { }

Type d'évènement

Un objet PageSwapEvent. Hérite de Event.

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

PageSwapEvent.activation Lecture seule: Retourne un objet NavigationActivation contenant le type de navigation et les entrées d'historique des documents actuels et de destination pour une navigation de même origine. Si la navigation comporte une URL cross-origin dans la chaîne de redirection, elle retourne null.
PageSwapEvent.viewTransition Lecture seule: Retourne l'objet ViewTransition représentant la transition de vue inter-documents entrante, si une transition est active lorsque l'évènement est déclenché. Sinon, elle retourne null.

Exemples

window.addEventListener("pageswap", async (e) => {
  // Ne s'exécute que si une transition de vue active existe
  if (e.viewTransition) {
    const currentUrl = e.activation.from?.url
      ? new URL(e.activation.from.url)
      : null;
    const targetUrl = new URL(e.activation.entry.url);

    // Aller de la page de profil à la page d'accueil
    // ~> L'image et le titre principaux sont ceux à animer
    if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
      // Définir les valeurs de view-transition-name sur les éléments à animer
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Supprimer les noms de transition de vue après la prise des instantanés
      // Évite les conflits de noms résultant de la persistance de l'état de la page dans le BFCache
      await e.viewTransition.finished;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }

    // Aller à la page de profil
    // ~> Les éléments cliqués sont ceux à animer
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

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

      // Supprimer les noms de transition de vue après la prise des instantanés
      // Évite les conflits de noms résultant de la persistance de l'état de la page dans le BFCache
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }
  }
});

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

Spécifications

Specification
HTML # event-pageswap

Compatibilité des navigateurs

Voir aussi

Utiliser l'API de transition de vue
L'évènement pagereveal

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 17 mars 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content