So erkennen Sie, ob sich die URL nach dem Hash in JavaScript geändert hat

Wie kann ich überprüfen, ob sich eine URL in JavaScript geändert hat? Beispielsweise hängen Websites wie GitHub, die AJAX verwenden, Seiteninformationen nach einem # -Symbol an, um eine eindeutige URL zu erstellen, ohne die Seite neu zu laden. Was ist der beste Weg, um festzustellen, ob sich diese URL ändert?

• Wird die onloadVeranstaltung erneut aufgerufen?
• Gibt es einen Ereignishandler für die URL?
• Oder muss die URL jede Sekunde überprüft werden, um eine Änderung festzustellen?

In modernen Browsern (IE8 +, FF3.6 +, Chrome) können Sie das hashchangeEreignis einfach anhören window.

In einigen alten Browsern benötigen Sie einen Timer, der ständig überprüft location.hash. Wenn Sie jQuery verwenden, gibt es ein Plugin , das genau das tut.

Ich wollte locationchangeEreignis-Listener hinzufügen können . Nach der folgenden Änderung können wir dies folgendermaßen tun

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

Im Gegensatz dazu window.addEventListener('hashchange',()=>{})würde nur ausgelöst, wenn sich der Teil nach einem Hashtag in einer URL ändert und window.addEventListener('popstate',()=>{})nicht immer funktioniert.

Diese Änderung ändert , ähnlich wie Christians Antwort , das Verlaufsobjekt, um einige Funktionen hinzuzufügen.

Standardmäßig gibt es ein popstateEreignis, aber keine Ereignisse für pushstateund replacestate.

Dadurch werden diese drei Funktionen so geändert, dass alle ein benutzerdefiniertes locationchangeEreignis auslösen, das Sie verwenden können, pushstatesowie replacestateEreignisse, wenn Sie diese verwenden möchten:

/* 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'))
});

Verwenden Sie diesen Code

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

mit jQuery

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

BEARBEITEN nach ein wenig Recherche:

Es scheint irgendwie, dass ich mich von der Dokumentation in Mozilla-Dokumenten täuschen lassen habe. Das popstateEreignis (und seine Rückruffunktion onpopstate) werden nicht ausgelöst, wenn das pushState()oder replaceState()im Code aufgerufen wird. Daher gilt die ursprüngliche Antwort nicht in allen Fällen.

Es gibt jedoch eine Möglichkeit, dies zu umgehen, indem die Funktionen gemäß @ alpha123 durch Affen gepatcht werden :

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

Ursprüngliche Antwort

Da der Titel dieser Frage " So erkennen Sie URL-Änderungen " lautet, lautet die Antwort, wenn Sie wissen möchten, wann sich der vollständige Pfad ändert (und nicht nur der Hash-Anker), dass Sie auf das popstateEreignis warten können :

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

Referenz für Popstate in Mozilla Docs

Derzeit (Januar 2017) wird Popstate von 92% der Browser weltweit unterstützt.

Mit jquery (und einem Plug-In) können Sie dies tun

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

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

Andernfalls müssten Sie setInterval verwenden und nach einer Änderung des Hash-Ereignisses suchen (window.location.hash).

Aktualisieren! Ein einfacher Entwurf

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();

Fügen Sie einen Listener für Hash-Änderungsereignisse hinzu!

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

Oder um alle URL-Änderungen abzuhören:

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

Dies ist besser als der folgende Code, da in window.onhashchange nur eines vorhanden sein kann und Sie möglicherweise den Code eines anderen überschreiben.

// Bad code example

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

Diese Lösung hat bei mir funktioniert:

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();

Obwohl dies eine alte Frage ist, ist das Location-Bar- Projekt sehr nützlich.

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});

Informationen zum Anhören von URL-Änderungen finden Sie unten:

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

Verwenden Sie diesen Stil, wenn Sie den Listener nach einer bestimmten Bedingung stoppen / entfernen möchten.

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

Bei einer kleinen Chrome-Erweiterung hatte ich das gleiche Problem mit einem zusätzlichen Problem: Manchmal ändert sich die Seite, aber nicht die URL.

Gehen Sie zum Beispiel einfach zur Facebook-Homepage und klicken Sie auf die Schaltfläche "Home". Sie werden die Seite neu laden, aber die URL ändert sich nicht (einseitiger App-Stil).

In 99% der Fälle entwickeln wir Websites, damit wir diese Ereignisse von Frameworks wie Angular, React, Vue usw. abrufen können.

ABER in meinem Fall einer Chrome-Erweiterung (in Vanilla JS) musste ich mir ein Ereignis anhören, das bei jedem "Seitenwechsel" ausgelöst wird, der im Allgemeinen durch eine geänderte URL abgefangen werden kann, aber manchmal nicht.

Meine hausgemachte Lösung war die folgende:

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);
}

Im Grunde genommen also die Leoneckert-Lösung, die auf den Fensterverlauf angewendet wird und sich ändert, wenn sich eine Seite in einer einzelnen Seiten-App ändert.

Keine Raketenwissenschaft, aber die sauberste Lösung, die ich gefunden habe, wenn man bedenkt, dass wir hier nur eine ganzzahlige Gleichheit prüfen und nicht größere Objekte oder das gesamte DOM.

Schauen Sie sich die jQuery-Entladefunktion an. Es kümmert sich um alle Dinge.

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

Das Entladeereignis wird an das Fensterelement gesendet, wenn der Benutzer von der Seite weg navigiert. Dies könnte eines von vielen Dingen bedeuten. Der Benutzer hätte auf einen Link klicken können, um die Seite zu verlassen, oder eine neue URL in die Adressleiste eingeben können. Die Vorwärts- und Zurück-Tasten lösen das Ereignis aus. Durch Schließen des Browserfensters wird das Ereignis ausgelöst. Sogar ein erneutes Laden der Seite führt zuerst zu einem Entladeereignis.

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

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

Die folgende Antwort stammt von hier (mit alter Javascript-Syntax (keine Pfeilfunktion, unterstützt 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"));
  });
})();

Eine andere einfache Möglichkeit, dies zu tun, besteht darin, ein Klickereignis über einen Klassennamen zu den Ankertags auf der Seite hinzuzufügen, um zu erkennen, wann darauf geklickt wurde. Anschließend können Sie die Datei window.location.href verwenden, um die URL-Daten abzurufen, die Sie können damit Ihre Ajax-Anfrage an den Server ausführen. Simpel und einfach.

Sie starten setIntervalbei jedem Anruf einen neuen , ohne den vorherigen abzubrechen - wahrscheinlich wollten Sie nur einen habensetTimeout