Cómo detectar si la URL ha cambiado después del hash en JavaScript

¿Cómo puedo verificar si una URL ha cambiado en JavaScript? Por ejemplo, sitios web como GitHub, que usan AJAX, agregarán información de la página después de un símbolo # para crear una URL única sin volver a cargar la página. ¿Cuál es la mejor manera de detectar si esta URL cambia?

• ¿Se onloadvuelve a llamar el evento?
• ¿Hay un controlador de eventos para la URL?
• ¿O debe comprobarse la URL cada segundo para detectar un cambio?

En los navegadores modernos (IE8 +, FF3.6 +, Chrome), puede escuchar el hashchangeevento en window.

En algunos navegadores antiguos, necesita un temporizador que verifique continuamente location.hash. Si está utilizando jQuery, hay un complemento que hace exactamente eso.

Quería poder agregar locationchangeoyentes de eventos. Después de la modificación a continuación, podremos hacerlo, así

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

Por el contrario, window.addEventListener('hashchange',()=>{})solo se dispararía si la parte después de un hashtag en una url cambia, y window.addEventListener('popstate',()=>{})no siempre funciona.

Esta modificación, similar a la respuesta de Christian , modifica el objeto de historia para agregar alguna funcionalidad.

Por defecto, hay un popstateevento, pero no hay eventos para pushstate, y replacestate.

Esto modifica estas tres funciones, para que todo el fuego una costumbre locationchangeevento para que usted pueda usar, y también pushstatey replacestateeventos si desea utilizar los:

/* 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 este código

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

con jQuery

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

EDITAR después de un poco de investigación:

De alguna manera parece que me ha engañado la documentación presente en los documentos de Mozilla. El popstateevento (y su función de devolución de llamada onpopstate) se no se activan cada vez que el pushState()o replaceState()reciben el nombre en clave. Por lo tanto, la respuesta original no se aplica en todos los casos.

Sin embargo, hay una manera de evitar esto parcheando las funciones según @ alpha123 :

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

Respuesta original

Dado que el título de esta pregunta es " Cómo detectar el cambio de URL ", la respuesta, cuando desea saber cuándo cambia la ruta completa (y no solo el ancla de hash), es que puede escuchar el popstateevento:

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

Referencia para popstate en Mozilla Docs

Actualmente (enero de 2017) hay soporte para popstate del 92% de los navegadores en todo el mundo.

Con jquery (y un complemento) puedes hacer

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

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

De lo contrario, sí, tendría que usar setInterval y buscar un cambio en el evento hash (window.location.hash)

¡Actualizar! Un borrador simple

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

¡Agregue un detector de eventos de cambio hash!

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

O, para escuchar todos los cambios de URL:

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

Esto es mejor que algo como el código a continuación porque solo puede existir una cosa en window.onhashchange y posiblemente sobrescribirá el código de otra persona.

// Bad code example

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

esta solución me funcionó:

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

Aunque es una vieja pregunta, el proyecto de la barra de ubicación es muy útil.

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

Para escuchar los cambios de URL, consulte a continuación:

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

Use este estilo si tiene la intención de detener / eliminar el oyente después de cierta condición.

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

Mientras hacía una pequeña extensión de Chrome, enfrenté el mismo problema con un problema adicional: veces, la página cambia pero no la URL.

Por ejemplo, solo vaya a la página de inicio de Facebook y haga clic en el botón 'Inicio'. Volverá a cargar la página, pero la URL no cambiará (estilo de aplicación de una página).

El 99% del tiempo, estamos desarrollando sitios web para que podamos obtener esos eventos de Frameworks como Angular, React, Vue, etc.

PERO , en mi caso de una extensión de Chrome (en Vanilla JS), tuve que escuchar un evento que se disparará para cada "cambio de página", que generalmente puede ser detectado por el cambio de URL, pero a veces no.

Mi solución casera fue la siguiente:

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

Básicamente, la solución de Leoneckert, aplicada al historial de ventanas, que cambiará cuando una página cambie en una sola aplicación de página.

No encontré la ciencia de cohetes, sino la solución más limpia, teniendo en cuenta que aquí solo estamos verificando una igualdad de enteros, y no objetos más grandes o todo el DOM.

Mire la función de descarga de jQuery. Maneja todas las cosas.

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

El evento de descarga se envía al elemento de ventana cuando el usuario se aleja de la página. Esto podría significar una de muchas cosas. El usuario podría haber hecho clic en un enlace para salir de la página o haber ingresado una nueva URL en la barra de direcciones. Los botones de avance y retroceso activarán el evento. Cerrar la ventana del navegador hará que se active el evento. Incluso una recarga de página creará primero un evento de descarga.

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

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

La respuesta a continuación viene de aquí (con la sintaxis antigua de JavaScript (sin función de flecha, compatible con 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"));
  });
})();

Otra forma sencilla de hacerlo es agregando un evento de clic, a través de un nombre de clase a las etiquetas de anclaje en la página para detectar cuándo se ha hecho clic, y ahora puede usar window.location.href para obtener los datos de URL que puede usar para ejecutar su solicitud ajax al servidor. Simple y fácil.

Está comenzando una nueva setIntervalen cada llamada, sin cancelar la anterior, probablemente solo quería tener unsetTimeout