Popstate no carregamento da página no Chrome

Estou usando a API de histórico para meu aplicativo da web e tenho um problema. Eu faço chamadas Ajax para atualizar alguns resultados na página e uso o history.pushState () para atualizar a barra de localização do navegador sem recarregar a página. Então, é claro, eu uso window.popstate para restaurar o estado anterior quando o botão Voltar é clicado.

O problema é bem conhecido - o Chrome e o Firefox tratam esse evento popstate de maneira diferente. Embora o Firefox não inicialize na primeira vez, o Chrome o faz. Eu gostaria de ter o estilo do Firefox e não disparar o evento no carregamento, pois ele apenas atualiza os resultados exatamente com os mesmos no carregamento. Existe uma solução alternativa, exceto usar History.js ? Não estou com vontade de usá-lo - ele precisa de muitas bibliotecas JS sozinho e, como preciso implementá-lo em um CMS com muito JS, gostaria de minimizar o JS que estou colocando nele .

Então, gostaria de saber se existe uma maneira de fazer o Chrome não disparar 'popstate' no carregamento ou, talvez, alguém tentou usar History.js com todas as bibliotecas agrupadas em um arquivo.

Na versão 19 do Google Chrome, a solução de @spliter parou de funcionar. Como @johnnymire apontou, history.state no Chrome 19 existe, mas é nulo.

Minha solução alternativa é adicionar window.history.state! == null para verificar se existe estado em window.history:

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

Eu testei em todos os principais navegadores e nas versões 19 e 18 do Chrome. Parece que funciona.

Caso você não queira tomar medidas especiais para cada gerenciador adicionado ao onpopstate, minha solução pode ser interessante para você. Uma grande vantagem dessa solução é também que os eventos onpopstate podem ser manipulados antes que o carregamento da página seja concluído.

Apenas execute este código uma vez antes de adicionar qualquer manipulador onpopstate e tudo deve funcionar como esperado (também conhecido como no Mozilla ^^) .

(function() {
    // There's nothing to do for older browsers ;)
    if (!window.addEventListener)
        return;
    var blockPopstateEvent = document.readyState!="complete";
    window.addEventListener("load", function() {
        // The timeout ensures that popstate-events will be unblocked right
        // after the load event occured, but not in the same event-loop cycle.
        setTimeout(function(){ blockPopstateEvent = false; }, 0);
    }, false);
    window.addEventListener("popstate", function(evt) {
        if (blockPopstateEvent && document.readyState=="complete") {
            evt.preventDefault();
            evt.stopImmediatePropagation();
        }
    }, false);
})();

Como funciona:

Chrome , Safari e provavelmente outros navegadores de webkit disparam o evento onpopstate quando o documento é carregado. Isso não é intencional, portanto, bloqueamos eventos popstate até o primeiro ciclo de loop de eventos após o documento ter sido carregado. Isso é feito pelas chamadas preventDefault e stopImmediatePropagation (ao contrário de stopPropagation, stopImmediatePropagation interrompe todas as chamadas de manipulador de eventos instantaneamente).

No entanto, como o readyState do documento já está em "complete" quando o Chrome dispara onpopstate erroneamente, permitimos eventos opopstate, que foram disparados antes de o carregamento do documento terminar para permitir chamadas onpopstate antes do documento ser carregado.

Atualização 2014-04-23: Corrigido um bug em que os eventos popstate eram bloqueados se o script fosse executado depois que a página fosse carregada.

Usar apenas setTimeout não é uma solução correta porque você não tem ideia de quanto tempo levará para o conteúdo ser carregado, então é possível que o evento popstate seja emitido após o tempo limite.

Aqui está minha solução: https://gist.github.com/3551566

/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
  setTimeout(function() {
    window.addEventListener('popstate', function() {
      ...
    });
  }, 0);
});

A solução foi encontrado em jquery.pjax.js linhas 195-225:

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href


// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if ( initialPop ) return

  var state = event.state

  if ( state && state.pjax ) {
    var container = state.pjax
    if ( $(container+'').length )
      $.pjax({
        url: state.url || location.href,
        fragment: state.fragment,
        container: container,
        push: false,
        timeout: state.timeout
      })
    else
      window.location = location.href
  }
})

Uma solução mais direta do que reimplementar pjax é definir uma variável em pushState e verificar a variável em popState, para que o popState inicial não seja disparado inconsistentemente no carregamento (não é uma solução específica de jquery, apenas usando-o para eventos):

$(window).bind('popstate', function (ev){
  if (!window.history.ready && !ev.originalEvent.state)
    return; // workaround for popstate on load
});

// ... later ...

function doNavigation(nextPageId) {
  window.history.ready = true;

  history.pushState(state, null, 'content.php?id='+ nextPageId); 
  // ajax in content instead of loading server-side
}

O evento onpopstate inicial do Webkit não tem estado atribuído, então você pode usar isso para verificar o comportamento indesejado:

window.onpopstate = function(e){
    if(e.state)
        //do something
};

Uma solução abrangente, permitindo a navegação de volta à página original, se basearia nesta ideia:

<body onload="init()">
    <a href="page1" onclick="doClick(this); return false;">page 1</a>
    <a href="page2" onclick="doClick(this); return false;">page 2</a>
    <div id="content"></div>
</body>

<script>
function init(){
   openURL(window.location.href);
}
function doClick(e){
    if(window.history.pushState)
        openURL(e.getAttribute('href'), true);
    else
        window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
    document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser'); 
    if(window.history.pushState){
        if(push)
            window.history.pushState({href: href}, 'your page title', href);
        else
            window.history.replaceState({href: href}, 'your page title', href);
    }
}
window.onpopstate = function(e){
    if(e.state)
        openURL(e.state.href);
};
</script>

Embora isso ainda possa disparar duas vezes (com alguma navegação bacana), pode ser tratado simplesmente com uma verificação em relação ao href anterior.

Esta é a minha solução alternativa.

window.setTimeout(function() {
  window.addEventListener('popstate', function() {
    // ...
  });
}, 1000);

Esta é minha solução:

var _firstload = true;
$(function(){
    window.onpopstate = function(event){
        var state = event.state;

        if(_firstload && !state){ 
            _firstload = false; 
        }
        else if(state){
            _firstload = false;
            // you should pass state.some_data to another function here
            alert('state was changed! back/forward button was pressed!');
        }
        else{
            _firstload = false;
            // you should inform some function that the original state returned
            alert('you returned back to the original state (the home state)');
        }
    }
})   

A melhor maneira de fazer o Chrome não disparar popstate no carregamento de uma página é votar https://code.google.com/p/chromium/issues/detail?id=63040 . Eles sabem que o Chrome não está em conformidade com as especificações HTML5 há dois anos inteiros e ainda não corrigiu isso!

Em caso de uso, event.state !== nullretornar ao histórico para a primeira página carregada não funcionará em navegadores não móveis. Eu uso sessionStorage para marcar quando a navegação ajax realmente começa.

history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;

window.addEventListener('popstate', function(e) {
    if (sessionStorage.ajNavStarted) {
        location.href = (e.state === null) ? location.href : e.state;
    }
}, false);

As soluções apresentadas apresentam um problema no recarregamento da página. O seguinte parece funcionar melhor, mas eu só testei o Firefox e o Chrome. Ele usa a realidade, que parece haver uma diferença entre e.event.statee window.history.state.

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

Eu sei que você pediu contra isso, mas você realmente deveria apenas usar History.js, pois ele limpa um milhão de incompatibilidades do navegador. Eu segui a rota de conserto manual apenas para descobrir mais tarde que havia mais e mais problemas que você só descobrirá no futuro. Realmente não é tão difícil hoje em dia:

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

E leia a api em https://github.com/browserstate/history.js

Isso resolveu o problema para mim. Tudo o que fiz foi definir uma função de tempo limite que atrasa a execução da função por tempo suficiente para perder o evento popstate que é disparado no pageload

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

Você pode criar um evento e dispará-lo após o manipulador onload.

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

Note, isso está um pouco quebrado no Chrome / Safari, mas eu enviei o patch para o WebKit e ele deve estar disponível em breve, mas é a forma "mais correta".

Isso funcionou para mim no Firefox e Chrome

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};