Comment utiliser l'événement hashchange ?

L'événement hashchange se déclenche lorsqu'il y a un changement de l'ancre (ou hash) d'une URL, c'est-à-dire la portion après le signe #. On va le retrouver dans la propriété DOM window.location.hash.

Le hash est un élément particulier de l'URL : il ne provoque pas de (re)chargement de page lorsqu'il change, il n'est pas divulgué au serveur web dans la requête HTTP.

Dans son usage le plus courant, il est associé à l'accès aux ancres HTML. C'est-à-dire que lorsqu'on clique sur un lien <a href="#recherche"> on va pointer le focus sur l'élément possédant id="ancre" et faire défiler la page jusqu'à la cible. C'est aussi la technique utilisée par les liens d'évitement pour améliorer l'accessibilité.

Lorsque l'ancre d'une page Web change, on peut également intercepter l'événement hashchange pour exécuter du code.

// Écouter l'événement
window.addEventListener("hashchange", function(event) {
  // Récupérer la nouvelle valeur de l'ancre
  const hash = window.location.hash;

  // Exécuter du code en fonction de la valeur de hash
  // ...
});

Dans cet exemple, nous utilisons la méthode addEventListener() pour écouter l'événement hashchange qui se produit sur l'objet window. En effet, puisqu'il se passe au niveau du navigateur, il n'est pas lié à un élément du DOM en particulier. Lorsque l'événement se déclenche, on récupère la valeur de location.hash sachant que cet objet location contient d'autres informations sur l'adresse courante.

Il est aussi possible de récupérer dans l'objet événement event en premier paramètre de la fonction de callback diverses informations telles que l'ancienne URL oldURL et la nouvelle newURL.

Pour utiliser hashchange afin de charger un nouveau contenu de manière asynchrone en HTTP à l'aide de la fonction fetch() :

// Écouter l'événement hashchange
window.addEventListener("hashchange", function(event) {
  // Récupérer la nouvelle valeur de l'ancre
  const hash = window.location.hash;

  // Charger le nouveau contenu à l'aide de la fonction fetch
  fetch("/api/content/" + hash)
    .then(function(response) {
      return response.text();
    })
    .then(function(html) {
      // Mettre à jour le contenu de la page
      document.querySelector("#content").innerHTML = html;
    });
});

Dans ce cas de figure, on récupère toujours à l'aide de hashchange la nouvelle valeur de l'ancre, puis elle est transmise de manière asynchrone au serveur, ou à une API quelconque de votre choix, pour obtenir le nouveau contenu et l'injecter dans un élement déjà existant de la page grâce à innerHTML. Il faut donc faire attention à ce qui est renvoyé par le back-end soit une portion de document HTML et non l'intégralité d'une page avec head, link, style, script et compagnie ce qui ne serait pas conforme et pourrait créer de gros conflits de style et de JavaScript.

Notez que cet exemple utilise then() pour enchaîner les réponses de la promesse renvoyée par fetch(). Vous pouvez également utiliser l'opérateur await pour attendre que la promesse de fetch soit résolue, avant de mettre à jour le contenu de la page, ce qui est un peu plus lisible que de passer par then.

// Écouter l'événement hashchange
window.addEventListener("hashchange", async function(event) {
  // Récupérer la nouvelle valeur de l'ancre
  const hash = window.location.hash;

  // Charger le nouveau contenu à l'aide de la fonction fetch
  const response = await fetch("/api/content/" + hash);
  const html = await response.text();

  // Mettre à jour le contenu de la page
  document.querySelector("#content").innerHTML = html;
});