Navigation : évènement navigate
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.
L'évènement navigate de l'interface Navigation est déclenché lorsqu'un type de navigation (angl.) est initié, vous permettant de l'intercepter si nécessaire.
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("navigate", (event) => { })
onnavigate = (event) => { }
Type d'évènement
Un objet NavigateEvent. Hérite de Event.
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 affichez 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'affiche 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, vous deviez écouter tous les clics sur les liens, exécuter event.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 en utilisant 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 # event-navigate |