历史Pushstate和Popstate无法正常工作

时间:2017-06-11 17:27:41

标签: javascript jquery html5-history

$( 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上看到了很多答案,我知道这可能是重复的,我尝试了很多解决方案。

2 个答案:

答案 0 :(得分:0)

在解决代码之后...我到达了这个

Expression<Func<Event, bool>>

这正是它应该如何运作

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

  });
});

您也可以查看this fiddle

答案 1 :(得分:0)

尝试这个

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