NavigationDestination
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'interface NavigationDestination de l'API Navigation représente la destination vers laquelle la navigation est en cours dans la navigation actuelle.
Elle est accessible avec la propriété NavigateEvent.destination.
Propriétés d'instance
idLecture seule-
Retourne la valeur
idde la destinationNavigationHistoryEntrysi leNavigateEvent.navigationTypeesttraverse, sinon une chaîne de caractères vide. indexLecture seule-
Retourne la valeur
indexde la destinationNavigationHistoryEntrysi leNavigateEvent.navigationTypeesttraverse, sinon-1. keyLecture seule-
Retourne la valeur
keyde la destinationNavigationHistoryEntrysi leNavigateEvent.navigationTypeesttraverse, sinon une chaîne de caractères vide. sameDocumentLecture seule-
Retourne
truesi la navigation se fait vers le mêmedocumentque la valeur actuelle deDocument, sinonfalse. urlLecture seule-
Retourne l'URL vers laquelle la navigation est en cours.
Méthodes d'instance
getState()-
Retourne une copie de l'état disponible associé à la destination
NavigationHistoryEntry, ou à l'opération de navigation (par exemple,navigate()) selon le cas.
Exemples
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 (nePasIntercepter(event)) {
return;
}
// Retourne un objet URL() construit à partir de la
// valeur NavigationDestination.url
const url = new URL(event.destination.url);
if (url.pathname.startsWith("/articles/")) {
event.intercept({
async handler() {
// L'URL a déjà changé, donc affiche un espace réservé pendant
// la récupération du nouveau contenu, comme un spinner ou une
// page de chargement
rendreEspaceReserveArticle();
// Récupère le nouveau contenu et l'affiche lorsqu'il est prêt
const contenuArticle = await getArticleContent(url.pathname);
rendrePageArticle(contenuArticle);
},
});
}
});
Spécifications
| Spécification |
|---|
| HTML # the-navigationdestination-interface |