15

我为我的网站制定了一个解决方案，其中包括使用 ajax 在网站上呈现一般信息。在此过程中，每次用户使用 window.history.pushState 方法加载某些特定内容时，我都会更改 URL。但是，当我按退格键或后退键时，不会加载旧 url 的内容（但是会加载 URL）。

我已经尝试了几种在 SO 上提出的解决方案，但没有任何运气。

以下是其中一个 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);
    });
});

希望大家能帮忙:)

4

2 回答 2

28

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 请求将是微不足道的，并且可能是一个好主意。

于 2013-10-12T15:24:25.763 回答
3

这对我有用。很简单。

 $(window).bind("popstate", function() {
    window.location = location.href
  });
于 2021-02-08T15:33:21.690 回答