歴史PushstateとPopstateが正常に動作しない

Question

$(document).ready(function() { 
    $(".a-menu").click(function(event){ 
     event.preventDefault(); 
     window.history.pushState({ content: $('.page-content').html() }, 
     pageData['header'], $(this).attr('href')); 
    }); 

    window.onpopstate = function(event){ 
     var d = event.state; 
     $('.page-content').html(d.content); //d.content doesn't give anything for last back attempt. 
    }; 
}); 

私が戻ってきて前進するような状況のためにやるべきこと。

注：私はstackoverflowに関する多くの答えを見てきました。これは重複している可能性があります。私は多くの解決策を試しました。

Answer 1

コードの周りの仕事の後...私はこの

$(document).ready(function() { 
    var getHtml = $('.page-content').html(); 
    $(".a-menu").click(function(event){ 
     event.preventDefault(); 
     var ThisHref = $(this).attr('href'); 
     getHtml = $('.page-content').html(); 

     // add A new Content 
     $('.page-content').html('<div>'+ThisHref+'</div>'); 

     if(window.location.href.indexOf(ThisHref) === -1){ 
      window.history.pushState({content: $('.page-content').html()},null, ThisHref); 
     } 
    }); 
    window.addEventListener('popstate', function(event) { 
     var state = event.state == null ? getHtml : event.state.content; 
     console.log(state); 
     $('.page-content').html(state);   
    }); 
}); 

そして、それはあなたがthis fiddleを見てとることができ

$(document).ready(function() { 
 
    var getHtml = $('.page-content').html(); // get the content div html content 
 
    $(".a-menu").click(function(event){  // <a> click event 
 
     event.preventDefault();    //prevent redirect 
 
     var ThisHref = $(this).attr('href'); // get this <a> href attribute 
 
     getHtml = $('.page-content').html(); // get the content div html content before change the content 
 

 
     // add A new Content 
 
     $('.page-content').html('<div>Current page is: '+ThisHref+'</div>'); 
 

 
     if(window.location.href.indexOf(ThisHref) === -1){ // check if url dont have a href to prevent run the pushState in each click 
 
     window.history.pushState({content: $('.page-content').html()},null, ThisHref); // pushState 
 
     } 
 
    }); 
 
window.addEventListener('popstate', function(event) { 
 
    var state = event.state == null ? getHtml : event.state.content; // if event.state == null get the previous html if not get the content 
 
    //console.log(state); 
 
    $('.page-content').html(state); // append the html to the content div 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="index.html" class="a-menu">Home</a> 
 
<a href="Cat.html" class="a-menu">Cat Page</a> 
 
<a href="Dog.html" class="a-menu">Dog Page</a> 
 
<div class="page-content"><div>Current page is: index.html</div></div>

を動作するはずです正確にどのようにこれに到達しました同様に

Answer 2

試着e

window.onpopstate = function(){ 
    window.history.go(-1); 
    var d = history.state; 
    $('.page-content').html(d); 
};