NavigateEvent

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.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Voir la compatibilité complète
En savoir plus

L'interface NavigateEvent de l'API Navigation est l'objet évènement pour l'évènement navigate, qui se déclenche lorsqu'un type quelconque de navigation ^(angl.) est initié (cela inclut l'utilisation des fonctionnalités de la History API comme History.go()). NavigateEvent fournit un accès aux informations sur cette navigation et permet aux développeur·euse·s d'intercepter et de contrôler la gestion de la navigation.

Constructeur

NavigateEvent(): Crée une nouvelle instance de l'objet NavigateEvent.

Propriétés d'instance

Hérite des propriétés de son parent, Event.

canIntercept Lecture seule: Retourne true si la navigation peut être interceptée, ou sinon false (par exemple, vous ne pouvez pas intercepter une navigation inter-origine).
destination Lecture seule: Retourne un objet NavigationDestination représentant la destination vers laquelle la navigation est effectuée.
downloadRequest Lecture seule: Retourne le nom du fichier demandé pour téléchargement, dans le cas d'une navigation de téléchargement (par exemple, un élément HTML <a> ou <area> avec un attribut download), ou sinon null.
formData Lecture seule: Retourne l'objet FormData représentant les données envoyées dans le cas d'un envoi de formulaire POST, ou sinon null.
hashChange Lecture seule: Retourne true si la navigation est une navigation vers un fragment (c'est-à-dire vers un identifiant de fragment dans le même document), ou sinon false.
hasUAVisualTransition Lecture seule: Retourne true si l'agent utilisateur a effectué une transition visuelle pour cette navigation avant de déclencher cet évènement, ou sinon false.
info Lecture seule: Retourne la valeur des données info transmises par l'opération de navigation initiatrice (par exemple, Navigation.back(), ou Navigation.navigate()), ou undefined si aucune donnée info n'a été transmise.
navigationType Lecture seule: Retourne le type de la navigation — push, reload, replace ou traverse.
signal Lecture seule: Retourne un objet AbortSignal, qui est annulé si la navigation est annulée (par exemple, si l'utilisateur·ice appuie sur le bouton « Arrêter » du navigateur, ou si une autre navigation commence et annule ainsi celle en cours).
sourceElement Lecture seule: Lorsque la navigation a été initiée par un élément (par exemple en cliquant sur un lien), retourne un objet Element représentant l'élément initiateur.
userInitiated Lecture seule: Retourne true si la navigation a été initiée par l'utilisateur·ice (par exemple, en cliquant sur un lien, en envoyant un formulaire ou en appuyant sur les boutons « Précédent »/« Suivant » du navigateur), ou sinon false.

Méthodes d'instance

Hérite des méthodes de son parent, Event.

intercept(): Intercepte cette navigation, la transformant en une navigation dans le même document vers l'URL destination. Elle peut accepter des fonctions gestionnaires qui définissent le comportement de gestion de la navigation, ainsi que les options focusReset et scroll pour activer ou désactiver le comportement par défaut de mise au point et de défilement du navigateur selon les besoins.
scroll(): Peut être appelée pour déclencher manuellement le comportement de défilement piloté par le navigateur qui se produit en réponse à la navigation, si vous souhaitez qu'il se produise avant que la gestion de la navigation ne soit terminée.

Exemples

Gérer une navigation en utilisant `intercept()`

navigation.addEventListener("navigate", (event) => {
  // Quitte prématurément si cette navigation ne doit pas être interceptée,
  // par exemple, si la navigation est inter-origine, ou une requête de téléchargement
  if (shouldNotIntercept(event)) return;

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // L'URL a déjà changé, donc afficher un espace réservé pendant
        // la récupération du nouveau contenu, comme un indicateur de
        // chargement ou une page de chargement
        rendreEspaceReserveArticle();

        // Récupère le nouveau contenu et l'afficher lorsqu'il est prêt
        const contenuArticle = await obtenirContenuArticle(url.pathname);
        rendrePageArticle(contenuArticle);
      },
    });
  }
});

Note : Avant que l'API Navigation ne soit disponible, pour faire quelque chose de similaire, il fallait écouter tous les évènements de clic sur les liens, exécuter e.preventDefault(), effectuer l'appel approprié à History.pushState(), puis configurer la vue de la page en fonction de la nouvelle URL. Et cela ne gérerait pas toutes les navigations — seulement les clics sur les liens initiés par l'utilisateur·ice.

Gérer le défilement avec `scroll()`

Dans cet exemple d'interception d'une navigation, la fonction handler() commence par récupérer et afficher le contenu d'un article, puis récupère et affiche un contenu secondaire par la suite. Il est logique de faire défiler la page jusqu'au contenu principal de l'article dès qu'il est disponible afin que l'utilisateur·ice puisse interagir avec lui, plutôt que d'attendre que le contenu secondaire soit également rendu. Pour ce faire, nous avons ajouté un appel à scroll() entre les deux.

navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(event)) return;
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        const contenuArticle = await obtenirContenuArticle(url.pathname);
        rendrePageArticle(contenuArticle);

        event.scroll();

        const contenuSecondaire = await obtenirContenuSecondaire(url.pathname);
        ajouterContenuSecondaire(contenuSecondaire);
      },
    });
  }
});

Spécifications

Spécification
HTML # the-navigateevent-interface

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

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

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