戻るボタン/バックスペースはwindow.history.pushStateで機能しません

Question

私はウェブサイトの一般的な情報を表示するためにajaxを使用することを含む私のウェブサイトの解決策を作成しました。これを行う際に、ユーザーがwindow.history.pushStateメソッドで特定のコンテンツを読み込むたびにURLを変更しています。しかし、バックスペースを押すか、戻るボタンを押すと、古いURLのコンテンツはロードされません（ただし、URLはロードされます）。

私は幸運なことなくSOに提示されたいくつかのソリューションを試しました。

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

は、あなたたちは戻る/進むと、ページの機能をすることはありませんだけでは:)

Answer 1

pushStateを助けることができると思います。ここでは

は、Ajaxの機能の一つの例です。あなたがしなければならないことは、 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をすべてサポートしたい場合は、おそらくURLを解析して、ポップステートで現在の状態を取得する別の方法が必要です。

また、ここではpriceCheckの結果をキャッシュして、より多くのPHPリクエストを作成するのではなく、バック/フォワードのキャッシュからそれらを取り出すことをお勧めします。