Javascript 后退按钮/退格不适用于window.history.pushState

我已经为我的网站做了一个解决方案，其中包括使用ajax在网站上呈现一般信息。为此，每当用户使用window.history.pushState方法加载某些特定内容时，我都会更改URL。但是，当我按backspace或back时，旧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);
    });
});

---

希望你们能提供帮助：）

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

---

在这里，缓存名称的价格检查结果并从缓存中向后/向前提取它们，而不是发出更多的php请求，这将是一个很简单的想法，而且可能是一个好主意。

这对我很有用。很简单

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

---

看起来像是一份工作，谢谢你的回答，这很有帮助。你提到了支持问题。目前的状态是什么？我不能就此与权威人士交谈，但根据，window.history将其添加到chrome v5中，但state属性直到v18才出现。其他现代浏览器似乎从历史介绍开始就支持状态。只支持单后退，也没有前进按钮。解决方法：似乎需要添加检查这是否是对

load（）

的后退按钮调用，如果不是按状态。Pro提示：在

popstate

侦听器函数的

if

条件中，您可以添加

else{window.location.reload（）；return；}

，这样当您到达起始页时，它将在没有任何url参数的情况下重新加载。这仍然存在与原始页面相同的问题之一：只工作一次后退，也没有前进按钮。OP通过添加一个检查来解决问题，以查看这是否是对

load（）

的后退按钮调用，但这是一个自定义检查，将根据您的页面设置进行更改。