Détecter le changement d'URL avec JavaScript

Publié le .

Temps de lecture: minute(s).

"url_change" est un plugin JavaScript qui permet de détecter le changement d'URL lorsque la page n'est pas rechargée (comme dans les Single Page Applications).

(function(l) {
  var o = l.href;
  setInterval(function() {
    var n = l.href;
    if (n !== o) {
      var d = JSON.parse('{"old":"'+o+'","new":"'+n+'"}');
      o = n;
      window.dispatchEvent(new CustomEvent('url_change',{detail:d}));
    }
  }, 150);
})(location);

Lors d'un changement de l'URL, un évènement personnalisé "url_change" est déclenché, et un écouteur dévènement peut être utilisé sur l'objet Window pour en lire le détail contenant deux informations :

  • "old" : URL de départ
  • "new" : URL de destination
window.addEventListener('url_change', function(e) {
  console.log(e);

  // Renvoie par exemple :
  // { old: 'https://www.equinode.com', new: 'https://www.equinode.com#target' }

});

Cet article vous a-t-il été utile ?

Super :)
Merci d'avoir donné votre avis !

Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !

^