Como acionar a mudança ao usar o botão Voltar com history.pushstate e popstate?

Eu sou praticamente um novato quando se trata de js, então me desculpe se estou sentindo falta de algo realmente simples.

Basicamente, eu fiz algumas pesquisas sobre como usar o history.pustate e popstate e eu fiz isso para que uma string de consulta fosse adicionada ao final do url ( ?v=images ) ou ( ?v=profile ) … ( v significa ‘view’) usando isto:

 var url = "?v=profile" var stateObj = { path: url }; history.pushState(stateObj, "page 2", url); 

Eu quero fazer isso para que eu possa carregar o conteúdo em um div, mas sem recarregar a página que eu fiz usando a function .load() .

Eu então usei este código:

 $(window).bind('popstate', function(event) { var state = event.originalEvent.state; 

na seção $(document).ready() e depois tentei dentro de apenas tags e não funcionou.

Eu não sei como fazer isso, então o conteúdo muda quando eu uso o botão voltar ou pelo menos faz com que eu possa ativar minha própria function para fazer isso; e eu estou supondo que tem algo a ver com o object de estado ?! Eu simplesmente não consigo encontrar nada online que explique o processo com clareza.

Se alguém pudesse me ajudar, seria incrível e agradeço antecipadamente a qualquer um que o faça!

O popstate contém apenas um estado quando existe um.

Quando é assim:

  1. página inicial carregada
  2. nova página carregada, com estado adicionado via pushState
  3. botão de volta pressionado

então não há estado, porque a página inicial foi carregada regularmente, não com pushState . Como resultado, o evento onpopstate é triggersdo com um state de null . Então, quando é null , significa que a página original deve ser carregada.

Você pode implementá-lo de tal forma que o history.pushState será chamado de forma consistente e você só precisa fornecer uma function de mudança de estado como esta: Clique aqui para o link jsFiddle

 function change(state) { if(state === null) { // initial page $("div").text("Original"); } else { // page added with pushState $("div").text(state.url); } } $(window).on("popstate", function(e) { change(e.originalEvent.state); }); $("a").click(function(e) { e.preventDefault(); history.pushState({ url: "/page2" }, "/page2", "page 2"); }); (function(original) { // overwrite history.pushState so that it also calls // the change function when called history.pushState = function(state) { change(state); return original.apply(this, arguments); }; })(history.pushState); 

Talvez não seja a melhor solução e talvez não seja adequada às suas necessidades. Mas para mim foi melhor apenas recarregar a página. Portanto, a página é consistente e carrega tudo de acordo com a querystring atual.

 $(document).ready(function() { $(window).on("popstate", function (e) { location.reload(); }); }); 
    Intereting Posts