Comment détecter si l'URL a changé après le hachage en JavaScript

Comment puis-je vérifier si une URL a changé en JavaScript? Par exemple, des sites Web comme GitHub, qui utilisent AJAX, ajouteront des informations de page après un symbole # pour créer une URL unique sans recharger la page. Quelle est la meilleure façon de détecter si cette URL change?

• L' onloadévénement est-il rappelé?
• Existe-t-il un gestionnaire d'événements pour l'URL?
• Ou l'URL doit-elle être vérifiée toutes les secondes pour détecter un changement?

Dans les navigateurs modernes (IE8 +, FF3.6 +, Chrome), vous pouvez simplement écouter l' hashchangeévénement sur window.

Dans certains anciens navigateurs, vous avez besoin d'une minuterie qui vérifie en permanence location.hash. Si vous utilisez jQuery, il existe un plugin qui fait exactement cela.

Je voulais pouvoir ajouter des locationchangeécouteurs d'événements. Après la modification ci-dessous, nous pourrons le faire, comme ceci

window.addEventListener('locationchange', function(){
    console.log('location changed!');
})

En revanche, window.addEventListener('hashchange',()=>{})ne se déclencherait que si la partie après un hashtag dans une URL change, etwindow.addEventListener('popstate',()=>{}) ne fonctionne pas toujours.

Cette modification, similaire à la réponse de Christian , modifie l'objet historique pour ajouter des fonctionnalités.

Par défaut, il y a un popstateévénement, mais il n'y a aucun événement pour pushstate, et replacestate.

Cela modifie ces trois fonctions afin que toutes déclenchent un locationchangeévénement personnalisé que vous pouvez utiliser, ainsi pushstateque des replacestateévénements si vous souhaitez les utiliser:

/* These are the modifications: */
history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

utiliser ce code

window.onhashchange = function() { 
     //code  
}

avec jQuery

$(window).bind('hashchange', function() {
     //code
});

EDIT après un peu de recherche:

Il semble en quelque sorte que j'ai été trompé par la documentation présente sur Mozilla docs. L' popstateévénement (et sa fonction de rappel onpopstate) ne sont pas déclenchés chaque fois que le pushState()ou replaceState()est appelé dans le code. Par conséquent, la réponse originale ne s'applique pas dans tous les cas.

Cependant, il existe un moyen de contourner cela en appliquant des correctifs uniques aux fonctions selon @ alpha123 :

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Some event-handling function
};

Réponse originale

Étant donné que le titre de cette question est " Comment détecter le changement d'URL ", la réponse, lorsque vous voulez savoir quand le chemin complet change (et pas seulement l'ancre de hachage), est que vous pouvez écouter l' popstateévénement:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Référence pour popstate dans Mozilla Docs

Actuellement (janvier 2017), 92% des navigateurs dans le monde prennent en charge popstate .

Avec jquery (et un plug-in), vous pouvez faire

$(window).bind('hashchange', function() {
 /* things */
});

http://benalman.com/projects/jquery-hashchange-plugin/

Sinon, oui, vous devrez utiliser setInterval et rechercher un changement dans l'événement de hachage (window.location.hash)

Mettre à jour! Un simple brouillon

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();

Ajoutez un écouteur d'événement de changement de hachage!

window.addEventListener('hashchange', function(e){console.log('hash changed')});

Ou, pour écouter toutes les modifications d'URL:

window.addEventListener('popstate', function(e){console.log('url changed')});

C'est mieux que quelque chose comme le code ci-dessous car une seule chose peut exister dans window.onhashchange et vous risquez d'écraser le code de quelqu'un d'autre.

// Bad code example

window.onhashchange = function() { 
     // Code that overwrites whatever was previously in window.onhashchange  
}

cette solution a fonctionné pour moi:

var oldURL = "";
var currentURL = window.location.href;
function checkURLchange(currentURL){
    if(currentURL != oldURL){
        alert("url changed!");
        oldURL = currentURL;
    }

    oldURL = window.location.href;
    setInterval(function() {
        checkURLchange(window.location.href);
    }, 1000);
}

checkURLchange();

Bien que vieille question, le projet de barre de localisation est très utile.

var LocationBar = require("location-bar");
var locationBar = new LocationBar();

// listen to all changes to the location bar
locationBar.onChange(function (path) {
  console.log("the current url is", path);
});

// listen to a specific change to location bar
// e.g. Backbone builds on top of this method to implement
// it's simple parametrized Backbone.Router
locationBar.route(/some\-regex/, function () {
  // only called when the current url matches the regex
});

locationBar.start({
  pushState: true
});

// update the address bar and add a new entry in browsers history
locationBar.update("/some/url?param=123");

// update the address bar but don't add the entry in history
locationBar.update("/some/url", {replace: true});

// update the address bar and call the `change` callback
locationBar.update("/some/url", {trigger: true});

Pour écouter les modifications d'URL, voir ci-dessous:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Utilisez ce style si vous avez l'intention d'arrêter / de supprimer l'auditeur après une certaine condition.

window.addEventListener('popstate', function(e) {
   console.log('url changed')
});

En faisant une petite extension chrome, j'ai rencontré le même problème avec un problème supplémentaire: Parfois, la page change mais pas l'URL.

Par exemple, allez simplement sur la page d'accueil Facebook et cliquez sur le bouton «Accueil». Vous rechargerez la page mais l'URL ne changera pas (style d'application d'une page).

99% du temps, nous développons des sites Web afin que nous puissions obtenir ces événements à partir de Frameworks tels que Angular, React, Vue, etc.

MAIS , dans mon cas d'une extension Chrome (dans Vanilla JS), j'ai dû écouter un événement qui se déclenchera à chaque "changement de page", qui peut généralement être capturé par une URL modifiée, mais parfois ce n'est pas le cas.

Ma solution maison était la suivante:

listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
  if (currentLength != oldLength) {
    // Do your stuff here
  }

  oldLength = window.history.length;
  setTimeout(function () {
    listen(window.history.length);
  }, 1000);
}

Donc, fondamentalement, la solution leoneckert, appliquée à l'historique des fenêtres, qui changera lorsqu'une page change dans une seule application de page.

Ce n'est pas sorcier, mais la solution la plus propre que j'ai trouvée, étant donné que nous ne vérifions qu'une égalité entière ici, et non des objets plus gros ou l'ensemble du DOM.

Regardez la fonction de déchargement jQuery. Il gère toutes les choses.

https://api.jquery.com/unload/

L'événement de déchargement est envoyé à l'élément window lorsque l'utilisateur quitte la page. Cela pourrait signifier une des nombreuses choses. L'utilisateur peut avoir cliqué sur un lien pour quitter la page ou saisi une nouvelle URL dans la barre d'adresse. Les boutons avant et arrière déclencheront l'événement. La fermeture de la fenêtre du navigateur provoquera le déclenchement de l'événement. Même un rechargement de page créera d'abord un événement de déchargement.

$(window).unload(
    function(event) {
        alert("navigating");
    }
);

window.addEventListener("beforeunload", function (e) {
    // do something
}, false);

La réponse ci-dessous vient d'ici (avec l'ancienne syntaxe javascript (pas de fonction de flèche, prend en charge IE 10+)): https://stackoverflow.com/a/52809105/9168962

(function() {
  if (typeof window.CustomEvent === "function") return false; // If not IE
  function CustomEvent(event, params) {
    params = params || {bubbles: false, cancelable: false, detail: null};
    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    return evt;
  }
  window.CustomEvent = CustomEvent;
})();

(function() {
  history.pushState = function (f) {
    return function pushState() {
      var ret = f.apply(this, arguments);
      window.dispatchEvent(new CustomEvent("pushState"));
      window.dispatchEvent(new CustomEvent("locationchange"));
      return ret;
    };
  }(history.pushState);
  history.replaceState = function (f) {
    return function replaceState() {
      var ret = f.apply(this, arguments);
      window.dispatchEvent(new CustomEvent("replaceState"));
      window.dispatchEvent(new CustomEvent("locationchange"));
      return ret;
    };
  }(history.replaceState);
  window.addEventListener("popstate", function() {
    window.dispatchEvent(new CustomEvent("locationchange"));
  });
})();

Une autre façon simple de le faire est d'ajouter un événement de clic, via un nom de classe aux balises d'ancrage sur la page pour détecter le moment où il a été cliqué, vous pouvez maintenant utiliser le window.location.href pour obtenir les données d'url qui vous pouvez utiliser pour exécuter votre requête ajax sur le serveur. Simple et facile.

Vous commencez un nouveau setIntervalà chaque appel, sans annuler le précédent - vous vouliez probablement seulement avoir unsetTimeout