Como detectar se o URL mudou após o hash em JavaScript

Como posso verificar se um URL foi alterado em JavaScript? Por exemplo, sites como o GitHub, que usam AJAX, acrescentam informações da página após um símbolo # para criar um URL exclusivo sem recarregar a página. Qual é a melhor maneira de detectar se esse URL é alterado?

• O onloadevento é chamado novamente?
• Existe um manipulador de eventos para o URL?
• Ou o URL deve ser verificado a cada segundo para detectar uma alteração?

Nos navegadores modernos (IE8 +, FF3.6 +, Chrome), você pode apenas ouvir o hashchangeevento window.

Em alguns navegadores antigos, você precisa de um timer que verifique continuamente location.hash. Se você estiver usando jQuery, existe um plugin que faz exatamente isso.

Eu queria poder adicionar locationchangeouvintes de eventos. Após a modificação abaixo, poderemos fazer isso, assim

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

Por outro lado, window.addEventListener('hashchange',()=>{})seria acionado apenas se a parte após uma hashtag em uma URL mudar e window.addEventListener('popstate',()=>{})nem sempre funcionar.

Essa modificação, semelhante à resposta de Christian , modifica o objeto de história para adicionar algumas funcionalidades.

Por padrão, há um popstateevento, mas não há eventos para pushstate, e replacestate.

Isso modifica essas três funções para que todos disparem um locationchangeevento personalizado para você usar, e também pushstatee replacestateeventos se você quiser usá-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'))
});

use este código

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

com jQuery

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

EDITAR depois de um pouco de pesquisa:

De alguma forma, parece que fui enganado pela documentação presente nos documentos do Mozilla. O popstateevento (e sua função de retorno de chamada onpopstate) não é acionado sempre que o pushState()ou replaceState()é chamado no código. Portanto, a resposta original não se aplica a todos os casos.

No entanto, existe uma maneira de contornar isso fazendo o patch de macaco das funções de acordo com @ alpha123 :

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

Resposta original

Dado que o título desta pergunta é " Como detectar alterações na URL ", a resposta, quando você deseja saber quando o caminho completo é alterado (e não apenas a âncora de hash), é que você pode ouvir o popstateevento:

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

Referência para popstate no Mozilla Docs

Atualmente (janeiro de 2017), há suporte para o popstate em 92% dos navegadores em todo o mundo.

Com jquery (e um plug-in), você pode fazer

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

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

Caso contrário, sim, você precisaria usar setInterval e verificar uma alteração no evento de hash (window.location.hash)

Atualizar! Um rascunho simples

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

Adicione um ouvinte de evento de alteração de hash!

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

Ou, para ouvir todas as alterações de URL:

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

Isso é melhor do que algo como o código abaixo, porque apenas uma coisa pode existir em window.onhashchange e você possivelmente substituirá o código de outra pessoa.

// Bad code example

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

esta solução funcionou para mim:

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

Embora seja uma pergunta antiga, o projeto da barra de localização é muito ú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 ouvir as alterações de URL, veja abaixo:

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

Use esse estilo se você pretende parar / remover o ouvinte após uma determinada condição.

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

Ao fazer uma pequena extensão do Chrome, enfrentei o mesmo problema com um problema adicional: às vezes, a página muda, mas não o URL.

Por exemplo, basta ir à página inicial do Facebook e clicar no botão 'Página inicial'. Você recarregará a página, mas o URL não será alterado (estilo de aplicativo de uma página).

Em 99% do tempo, estamos desenvolvendo sites para que possamos obter esses eventos de estruturas como Angular, React, Vue etc.

MAS , no meu caso de uma extensão do Chrome (no Vanilla JS), tive que ouvir um evento que será acionado para cada "alteração de página", que geralmente pode ser detectada pela alteração de URL, mas às vezes não.

Minha solução caseira foi a seguinte:

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

Então, basicamente, a solução leoneckert, aplicada ao histórico da janela, que muda quando uma página é alterada em um aplicativo de página única.

Não é ciência de foguetes, mas a solução mais limpa que encontrei, considerando que estamos apenas verificando uma igualdade de números aqui, e não objetos maiores ou todo o DOM.

Veja a função de descarregamento do jQuery. Ele lida com todas as coisas.

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

O evento de descarregamento é enviado ao elemento da janela quando o usuário sai da página. Isso pode significar uma de muitas coisas. O usuário pode ter clicado em um link para sair da página ou digitado um novo URL na barra de endereço. Os botões de avançar e voltar acionarão o evento. Fechar a janela do navegador fará com que o evento seja acionado. Mesmo um recarregamento de página criará primeiro um evento de descarregamento.

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

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

A resposta abaixo vem daqui (com sintaxe javascript antiga (nenhuma função de seta, suporte ao 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"));
  });
})();

Outra maneira simples de fazer isso é adicionar um evento de clique, por meio de um nome de classe, às tags de âncora na página para detectar quando ele foi clicado. Agora você pode usar o window.location.href para obter os dados da URL que você pode usar para executar sua solicitação ajax no servidor. Simples e Fácil.

Você está iniciando um novo setIntervalem cada chamada, sem cancelar a anterior - provavelmente só queria ter umsetTimeout