Bouton précédent / retour arrière ne fonctionne pas avec fenêtre.l'histoire.pushState

J'ai mis au point une solution pour mon site, qui comprend l'utilisation d'ajax pour présenter les informations générales sur le site web. En faisant cela, je suis à la modification de l'URL à chaque fois qu'un utilisateur télécharge un contenu spécifique à la fenêtre.l'histoire.pushState méthode. Cependant, lorsque j'appuie sur la touche retour arrière ou appuyez sur la touche back, le contenu de l'ancienne url n'est pas chargé (cependant l'URL est chargé).

J'ai essayé plusieurs solutions présentées sur sans un peu de chance.

Voici un exemple de l'une des fonctions 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);
    });
});

Espère que vous les gars peuvent aider 🙂

ressemble à un travail pour un setTimeout boucle

OriginalL'auteur Amnestic | 2013-10-12

  1. 19

    pushState seule ne suffira pas à faire de votre fonction de la page avec en arrière/avant. Ce que vous devez faire est d'écouter onpopstate et charger le contenu vous-même semblable à ce qui allait se passer lors d'un clic.

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

    Noter que history.state est un peu moins pris en charge une partie de l'histoire de l'API. Si vous voulez prendre en charge tous les pushState des navigateurs, vous devez avoir un autre moyen de le tirer de l'état actuel sur popstate, probablement par l'analyse de l'URL.

    Il serait trivial et sans doute une bonne idée pour mettre en cache les résultats de la priceCheck pour le nom ainsi et de les tirer de la cache à l'arrière/vers l'avant au lieu de faire plusieurs requêtes php.

    Merci pour cette réponse, qu'il est utile. Vous avez mentionné les questions de soutien. Quel est l'état actuel de ce qu'il en est aujourd'hui?
    Je ne peux pas parler avec autorité sur ce mais selon mozilla info, la fenêtre.l'histoire l'a fait dans chrome v5, mais la propriété de l'etat ne semble pas til v18. Les autres navigateurs modernes semblent avoir pris en charge l'état de l'introduction de l'histoire.
    Ne fonctionne que seul l'arrière, aussi pas de bouton d'avance.
    Résolu: il semble nécessaire d'ajouter de vérifier si cela est de retour bouton d'appel à l' load(), si c'est pour ne pas pousser l'état.
    c'est un bon point. de l'édition.

    OriginalL'auteur numbers1311407