Jak wykryć, czy adres URL zmienił się po krzyżyku w JavaScript

Jak mogę sprawdzić, czy adres URL zmienił się w JavaScript? Na przykład strony internetowe takie jak GitHub, które używają AJAX, dołączą informacje o stronie po symbolu #, aby utworzyć unikalny adres URL bez ponownego ładowania strony. Jaki jest najlepszy sposób na wykrycie, czy ten adres URL się zmienia?

• Czy onloadwydarzenie zostało ponownie wywołane?
• Czy istnieje program obsługi zdarzeń dla adresu URL?
• A może adres URL musi być sprawdzany co sekundę, aby wykryć zmianę?

W nowoczesnych przeglądarkach (IE8 +, FF3.6 +, Chrome) można po prostu posłuchać hashchangewydarzenia na window.

W niektórych starych przeglądarkach potrzebny jest licznik czasu, który nieustannie sprawdza location.hash. Jeśli używasz jQuery, istnieje wtyczka , która dokładnie to robi.

Chciałem mieć możliwość dodawania locationchangesłuchaczy zdarzeń. Po poniższej modyfikacji będziemy mogli to zrobić w ten sposób

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

W przeciwieństwie do tego, window.addEventListener('hashchange',()=>{})będzie uruchamiane tylko wtedy, gdy zmieni się część po hashtagu w adresie URL i window.addEventListener('popstate',()=>{})nie zawsze działa.

Ta modyfikacja, podobnie jak odpowiedź Christiana , modyfikuje obiekt historii, aby dodać pewną funkcjonalność.

Domyślnie istnieje popstatewydarzenie, ale nie ma wydarzeń dla pushstatei replacestate.

Modyfikuje te trzy funkcje, dzięki czemu cały ogień zwyczaj locationchangewydarzenie do użycia, a także pushstatei replacestatewydarzenia, jeśli chcesz korzystać z tych:

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

użyj tego kodu

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

z jQuery

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

EDYTUJ po krótkiej analizie:

Wygląda na to, że dałem się nabrać na dokumentację obecną w dokumentach Mozilli. popstateWydarzenie (i jego funkcja zwrotna onpopstate) są nie wywołał , gdy pushState()albo replaceState()są wywoływane w kodzie. Dlatego oryginalna odpowiedź nie ma zastosowania we wszystkich przypadkach.

Istnieje jednak sposób na obejście tego przez małpowanie funkcji zgodnie z @ alpha123 :

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

Oryginalna odpowiedź

Biorąc pod uwagę, że tytuł tego pytania brzmi „ Jak wykryć zmianę adresu URL ”, jeśli chcesz wiedzieć, kiedy zmienia się pełna ścieżka (a nie tylko zakotwiczenie skrótu), możesz nasłuchiwać popstatezdarzenia:

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

Odniesienie do popstate w Mozilla Docs

Obecnie (styczeń 2017) popstate obsługuje 92% przeglądarek na całym świecie.

Dzięki jquery (i wtyczce) możesz to zrobić

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

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

W przeciwnym razie tak, musiałbyś użyć setInterval i sprawdzić, czy wystąpiła zmiana w zdarzeniu hash (window.location.hash)

Aktualizacja! Prosty szkic

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

Dodaj odbiornik zdarzeń zmiany skrótu!

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

Lub, aby odsłuchać wszystkie zmiany adresu URL:

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

Jest to lepsze niż coś takiego jak poniższy kod, ponieważ tylko jedna rzecz może istnieć w window.onhashchange i prawdopodobnie nadpisujesz kod kogoś innego.

// Bad code example

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

to rozwiązanie zadziałało dla mnie:

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

Chociaż to stare pytanie, projekt paska lokalizacji jest bardzo przydatny.

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

Aby odsłuchać zmiany adresu URL, zobacz poniżej:

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

Użyj tego stylu, jeśli zamierzasz zatrzymać / usunąć słuchacza po spełnieniu pewnych warunków.

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

Robiąc małe rozszerzenie do Chrome, napotkałem ten sam problem z dodatkowym problemem: czasami strona się zmienia, ale nie adres URL.

Na przykład po prostu przejdź do strony głównej Facebooka i kliknij przycisk „Strona główna”. Ponownie załadujesz stronę, ale adres URL nie ulegnie zmianie (styl aplikacji jednostronicowej).

W 99% tworzymy strony internetowe, abyśmy mogli pobierać te zdarzenia z ram, takich jak Angular, React, Vue itp.

ALE , w moim przypadku rozszerzenia Chrome (w Vanilla JS), musiałem słuchać zdarzenia, które będzie wyzwalane przy każdej „zmianie strony”, które generalnie można wychwycić po zmianie adresu URL, ale czasami tak się nie dzieje.

Moje domowe rozwiązanie było następujące:

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

A więc w zasadzie rozwiązanie leoneckert, zastosowane do historii okien, które zmieni się, gdy strona zmieni się w aplikacji pojedynczej strony.

To nie fizyka jądrowa, ale najczystsze rozwiązanie, jakie znalazłem, biorąc pod uwagę, że sprawdzamy tutaj tylko całkowitą równość, a nie większe obiekty lub cały DOM.

Spójrz na funkcję wyładowania jQuery. Obsługuje wszystkie rzeczy.

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

Zdarzenie unload jest wysyłane do elementu window, gdy użytkownik opuści stronę. Może to oznaczać jedną z wielu rzeczy. Użytkownik mógł kliknąć łącze, aby opuścić stronę lub wpisać nowy adres URL w pasku adresu. Przyciski do przodu i do tyłu wywołają zdarzenie. Zamknięcie okna przeglądarki spowoduje wywołanie zdarzenia. Nawet ponowne załadowanie strony spowoduje najpierw utworzenie zdarzenia rozładowania.

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

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

Odpowiedź poniżej pochodzi stąd (ze starą składnią javascript (bez funkcji strzałek, obsługa 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"));
  });
})();

Innym prostym sposobem na to jest dodanie zdarzenia kliknięcia, poprzez nazwę klasy do znaczników kotwicy na stronie, aby wykryć, kiedy została kliknięta, a następnie możesz teraz użyć window.location.href do pobrania danych adresu URL, które możesz użyć do uruchomienia żądania AJAX do serwera. Proste i łatwe.

Zaczynasz nowe setIntervalprzy każdym połączeniu, bez anulowania poprzedniego - prawdopodobnie chciałeś mieć tylkosetTimeout