Question

它确实加载了一个新页面并且网址确实更新了，但是当我按下后退按钮时，只有网址已更改而没有刷新但内容却没有。

$('button').click(function(){
  window.history.pushState({}, '', 'page2.php');
  $('body').html('<div class="loading.gif"></div>');

  //Load Page
  $.get('page2.php', function(data){
    $('body').html(data);
  };

  //Edited 
  $(window).bind('popstate', function(){
    //What should I code here??
  });
});

Answer 1

我做了类似的事情：

    $(window).bind('popstate', function(){
  window.location.href = window.location.href;
  });

它工作得很好。
代码从网址获取位置并重定向到此网址。

Answer 2

我用它来更改条形地址并保存当前状态，包括当前的html正文，然后我重新加载它在后面的bouton点击而没有任何其他的ajax调用。全部保存在您的浏览器中：

$(document).ajaxComplete(function(ev, jqXHR, settings) {

    var stateObj = { url: settings.url, innerhtml: document.body.innerHTML };
    window.history.pushState(stateObj, settings.url, settings.url);
});


window.onpopstate = function (event) {
    var currentState = history.state;
    document.body.innerHTML = currentState.innerhtml;
};

Answer 3

您需要实现popstate事件。在按下状态后单击后退按钮时，页面将收到popstate事件。在其中，您需要使用正确的页面替换页面内容。

请参阅an example from MDN

更新的代码：

$('button').click(function(){
  // Store some information in the state being pushed
  window.history.pushState({url:'page2.php'}, '', 'page2.php');
  $('body').html('<div class="loading.gif"></div>');

  //Load Page
  $.get('page2.php', function(data){
    $('body').html(data);
  };

  //Edited 
  $(window).bind('popstate', function(event){
    var url = null;

    if (event.state && event.state.url) {
        url = event.state.url;
    } else {
        url = 'index.html'; // or whatever your initial url was
    }

    // Update the contents of the page with whatever url was stored in the state.
    $.get(url, function(data){
        $('body').html(data);
    };
  });
});

pushState和back按钮有效，但内容不会改变

3 个答案: