后退按钮/退格键不能与window.history.pushState一起使用 [英] Back button / backspace does not work with window.history.pushState

问题描述

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

I have made a solution for my website which includes using ajax to present the general information on the website. In doing this, I am changing the URL every time a user loads some specific content with the window.history.pushState method. However, when I press backspace or press back, the content of the old url is not loaded (however the URL is loaded).

我已尝试在SO上展示多种解决方案没有运气。

I have tried several solutions presented on SO without any luck.

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

Here is an example of one of the ajax functions:

$(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);
    });
});

希望你们能提供帮助：）

Hope you guys can help :)

推荐答案

pushState 单独使用后退/前进功能不会使您的页面功能正常。您需要做的是听取 onpopstate 并自己加载内容，类似于点击时发生的内容。

pushState alone will not make your page function with back/forward. What you'd need to do is listen to onpopstate and load the contents yourself similar to what would happen on click.

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。

Note that history.state is a somewhat less supported part of the history API. If you wanted to support all pushState browsers you'd have to have another way to pull the current state on popstate, probably by parsing the URL.

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

It would be trivial and probably a good idea here to cache the results of the priceCheck for the name as well and pull them from the cache on back/forward instead of making more php requests.

这篇关于后退按钮/退格键不能与window.history.pushState一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！