Navigation

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 Navigation de l'API Navigation permet de contrôler toutes les actions de navigation pour la fenêtre (window) actuelle en un seul endroit central, y compris l'initiation de navigations de manière programmatique, l'examen des entrées de l'historique de navigation et la gestion des navigations au fur et à mesure qu'elles se produisent.

Elle est accessible par la propriété Window.navigation.

L'API Navigation n'expose que les entrées de l'historique créées dans le contexte de navigation actuel et ayant la même origine que la page actuelle (par exemple, pas les navigations à l'intérieur des <iframe> intégrés, ni les navigations inter-origines), fournissant une liste précise de toutes les entrées de l'historique précédentes uniquement pour votre application. Cela rend la traversée de l'historique beaucoup moins fragile que avec l'ancienne API History.

Propriétés d'instance

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

activation Lecture seule: Retourne un objet NavigationActivation contenant des informations sur la navigation inter-document la plus récente, qui a « activé » ce Document.
canGoBack Lecture seule: Retourne true s'il est possible de naviguer en arrière dans l'historique de navigation (c'est-à-dire que la currentEntry n'est pas la première dans la liste des entrées de l'historique), et false dans le cas contraire.
canGoForward Lecture seule: Retourne true s'il est possible de naviguer en avant dans l'historique de navigation (c'est-à-dire que la currentEntry n'est pas la dernière dans la liste des entrées de l'historique), et false dans le cas contraire.
currentEntry Lecture seule: Retourne un objet NavigationHistoryEntry représentant l'emplacement vers lequel l'utilisateur·ice est actuellement navigué.
transition Lecture seule: Retourne un objet NavigationTransition représentant l'état d'une navigation en cours, qui peut être utilisé pour la suivre. Retourne null si aucune navigation n'est en cours.

Méthodes d'instance

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

back(): Navigue en arrière d'une entrée de l'historique de navigation.
entries(): Retourne un tableau d'objets NavigationHistoryEntry représentant toutes les entrées de l'historique existantes.
forward(): Navigue en avant d'une entrée de l'historique de navigation.
navigate(): Navigue vers une URL spécifique, en mettant à jour tout état fourni dans la liste des entrées de l'historique.
reload(): Recharge l'URL actuelle, en mettant à jour tout état fourni dans la liste des entrées de l'historique.
traverseTo(): Navigue vers une NavigationHistoryEntry spécifique identifiée par key.
updateCurrentEntry(): Met à jour l'état de la currentEntry ; utilisé dans les cas où le changement d'état est indépendant d'une navigation ou d'un rechargement.

Évènements

Hérite des évènements de son parent, EventTarget.

currententrychange: Déclenché lorsque la propriété Navigation.currentEntry change.
navigate: Déclenché lorsque tout type de navigation ^(angl.) est initié, vous permettant d'intercepter si nécessaire.
navigateerror: Déclenché lorsque une navigation échoue.
navigatesuccess: Déclenché lorsque une navigation réussie est terminée.

Exemples

Déplacer vers l'avant et vers l'arrière dans l'historique

async function gestionEnArriere() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // Gère tout nettoyage nécessaire après que
    // la navigation soit terminée
  } else {
    displayBanner("Vous êtes sur la première page");
  }
}

async function gestionEnAvant() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // Gère tout nettoyage nécessaire après que
    // la navigation soit terminée
  } else {
    displayBanner("Vous êtes sur la dernière page");
  }
}

Accéder à une entrée spécifique de l'historique

// Au démarrage de JavaScript, récupérer l'identifiant de la première
// page chargée afin que l'utilisateur·ice puisse toujours y revenir.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);

// Quittez la page, mais le bouton reste toujours fonctionnel.
await navigation.navigate("/another_url").finished;

Naviguer et mettre à jour l'état

navigation.navigate(url, { state: newState });

navigation.reload({ state: newState });

Ou si l'état ne dépend pas d'une navigation ou d'un rechargement :

navigation.updateCurrentEntry({ state: newState });

Spécifications

Spécification
HTML # navigation-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