Question

我为我的网站制作了一个解决方案，其中包括使用ajax在网站上显示一般信息。在这样做时，每次用户使用window.history.pushState方法加载某些特定内容时，我都会更改URL。但是，当我按退格键或按回时，旧网址的内容未加载（但是加载了URL）。

我已经尝试了几个解决方案，没有任何运气。

以下是其中一个ajax函数的示例：

$(document).ready(function(){
$(document).on("click",".priceDeckLink",function(){
    $("#hideGraphStuff").hide();
    $("#giantWrapper").show();
    $("#loadDeck").fadeIn("fast");
    var name = $(this).text();
    $.post("pages/getPriceDeckData.php",{data : name},function(data){
        var $response=$(data);
        var name = $response.filter('#titleDeck').text();
        var data = data.split("%%%%%%%");
        $("#deckInfo").html(data[0]);
        $("#textContainer").html(data[1]);
        $("#realTitleDeck").html(name);
        $("#loadDeck").hide();
        $("#hideGraphStuff").fadeIn("fast");
        loadGraph();
        window.history.pushState("Price Deck", "Price Deck", "?p=priceDeck&dN="+ name);
    });
});

希望你们能帮忙:)。

Answer 1

仅

pushState不会使您的页面具有后退/前进功能。你需要做的就是听onpopstate并自己加载内容，类似于点击时发生的内容。

var load = function (name, skipPushState) {
  $("#hideGraphStuff").hide();
  // pre-load, etc ...

  $.post("pages/getPriceDeckData.php",{data : name}, function(data){
    // on-load, etc ...

    // we don't want to push the state on popstate (e.g. 'Back'), so `skipPushState`
    // can be passed to prevent it
    if (!skipPushState) {
      // build a state for this name
      var state = {name: name, page: 'Price Deck'};
      window.history.pushState(state, "Price Deck", "?p=priceDeck&dN="+ name);
    }
  });
}

$(document).on("click", ".priceDeckLink", function() {
  var name = $(this).text();
  load(name);
});

$(window).on("popstate", function () {
  // if the state is the page you expect, pull the name and load it.
  if (history.state && "Price Deck" === history.state.page) {
    load(history.state.name, true);
  }
});

请注意，history.state是历史API支持较少的部分。如果你想支持所有pushState个浏览器，你必须有另一种方法来提取popstate上的当前状态，可能是通过解析URL。

在这里缓存priceCheck的结果并将其从缓存中拉回/转发而不是发出更多的php请求，这可能是微不足道的，也许是个好主意。

Answer 2

这对我有用。很简单。

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

后退按钮/退格键不能与window.history.pushState一起使用

2 个答案: