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

希望你们能帮助:)

最佳答案

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请求,在这里也是微不足道的,并且可能是一个好主意。

关于javascript - 后退按钮/退格键不适用于window.history.pushState,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19335372/

10-12 02:33