Come rilevare se l'URL è cambiato dopo l'hash in JavaScript

Come posso verificare se un URL è cambiato in JavaScript? Ad esempio, siti Web come GitHub, che utilizzano AJAX, aggiungeranno le informazioni della pagina dopo un simbolo # per creare un URL univoco senza ricaricare la pagina. Qual è il modo migliore per rilevare se questo URL cambia?

• L' onloadevento viene richiamato di nuovo?
• Esiste un gestore eventi per l'URL?
• O l'URL deve essere controllato ogni secondo per rilevare una modifica?

Nei browser moderni (IE8 +, FF3.6 +, Chrome), puoi semplicemente ascoltare l' hashchangeevento window.

In alcuni vecchi browser, è necessario un timer che controlli continuamente location.hash. Se stai usando jQuery, c'è un plugin che fa esattamente questo.

Volevo poter aggiungere locationchangelistener di eventi. Dopo la modifica di seguito, saremo in grado di farlo, in questo modo

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

Al contrario, window.addEventListener('hashchange',()=>{})sparerebbe solo se la parte dopo un hashtag in un url cambia e window.addEventListener('popstate',()=>{})non funziona sempre.

Questa modifica, simile alla risposta di Christian , modifica l'oggetto della storia per aggiungere alcune funzionalità.

Per impostazione predefinita, c'è un popstateevento, ma non ci sono eventi per pushstatee replacestate.

Questo modifica queste tre funzioni in modo che tutti generino un locationchangeevento personalizzato da usare, e anche pushstateed replacestateeventi se si desidera utilizzare quelli:

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

usa questo codice

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

con jQuery

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

MODIFICA dopo un po 'di ricerche:

Sembra in qualche modo che sono stato ingannato dalla documentazione presente sui documenti di Mozilla. L' popstateevento (e la sua funzione di callback onpopstate) non vengono attivati ogni volta che pushState()o replaceState()vengono chiamati nel codice. Pertanto la risposta originale non si applica in tutti i casi.

Tuttavia c'è un modo per aggirare questo problema tramite l'applicazione di patch di scimmia alle funzioni secondo @ alpha123 :

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

Risposta originale

Dato che il titolo di questa domanda è " Come rilevare la modifica dell'URL ", la risposta, quando vuoi sapere quando cambia il percorso completo (e non solo l'ancora hash), è che puoi ascoltare l' popstateevento:

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

Riferimento per popstate in Mozilla Docs

Attualmente (gennaio 2017) esiste il supporto per popstate dal 92% dei browser in tutto il mondo.

Con jquery (e un plug-in) puoi farlo

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

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

Altrimenti sì, dovresti usare setInterval e verificare la presenza di un evento hash (window.location.hash)

Aggiornare! Una semplice bozza

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

Aggiungi un listener di eventi con modifica dell'hash!

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

Oppure, per ascoltare tutte le modifiche all'URL:

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

Questo è meglio di qualcosa come il codice qui sotto perché solo una cosa può esistere in window.onhashchange e probabilmente sovrascriverai il codice di qualcun altro.

// Bad code example

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

questa soluzione ha funzionato per me:

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

Sebbene sia una vecchia domanda, il progetto della barra della posizione è molto 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});

Per ascoltare le modifiche all'URL, vedi sotto:

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

Utilizzare questo stile se si intende arrestare / rimuovere il listener dopo alcune condizioni.

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

Mentre facevo una piccola estensione di Chrome, ho riscontrato lo stesso problema con un problema aggiuntivo: a volte, la pagina cambia ma non l'URL.

Ad esempio, vai alla home page di Facebook e fai clic sul pulsante "Home". Ricaricherai la pagina ma l'URL non cambierà (stile app di una pagina).

Il 99% delle volte, stiamo sviluppando siti Web in modo da poter ottenere quegli eventi da Frameworks come Angular, React, Vue ecc.

MA , nel mio caso di un'estensione di Chrome (in Vanilla JS), ho dovuto ascoltare un evento che si innescherebbe per ogni "cambio di pagina", che in genere può essere intercettato da un cambio di URL, ma a volte no.

La mia soluzione fatta in casa era la seguente:

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

Quindi, in sostanza, la soluzione leoneckert, applicata alla cronologia delle finestre, cambierà quando una pagina cambia in un'unica app.

Non la scienza missilistica, ma la soluzione più pulita che ho trovato, considerando che qui stiamo solo controllando una parità intera e non oggetti più grandi o l'intero DOM.

Guarda la funzione di scarico di jQuery. Gestisce tutte le cose.

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

L'evento di scarico viene inviato all'elemento della finestra quando l'utente si allontana dalla pagina. Questo potrebbe significare una delle tante cose. L'utente avrebbe potuto fare clic su un collegamento per uscire dalla pagina o digitare un nuovo URL nella barra degli indirizzi. I pulsanti avanti e indietro attiveranno l'evento. La chiusura della finestra del browser provoca l'attivazione dell'evento. Anche un ricaricamento della pagina creerà prima un evento di scaricamento.

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

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

La risposta di seguito viene da qui (con la vecchia sintassi javascript (nessuna funzione freccia, supporto 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"));
  });
})();

Un altro modo semplice per farlo è quello di aggiungere un evento click, tramite un nome di classe ai tag anchor sulla pagina per rilevare quando è stato fatto clic, quindi ora è possibile utilizzare window.location.href per ottenere i dati dell'URL che puoi usare per eseguire la tua richiesta Ajax sul server. Semplice e facile.

Stai iniziando un nuovo setIntervalad ogni chiamata, senza cancellare quello precedente - probabilmente intendevi solo avere unsetTimeout