HTML5履歴APIを使用した1ページの複数のAJAXリクエスト

Question

アプリケーションの一般的なページには、AJAXを使用してコンテンツをすばやく読み込むためのさまざまなリクエストが含まれています。たとえば、ヘッダーのメインナビゲーションリンクをクリックするとコンテンツの全セクションがロードされ、タブをクリックするとサブセクションがロードされます。

これらの「領域」はすべて実際にはjqueryを使用して必要なdivなどをロードするために細断されたページなので、ユーザーはJSをオフにしたりリンクを開きます新しいタブ）。したがって、私はhttps://github.com/browserstate/History.js/を使用してURLとタイトルを即座に変更するので、ユーザーはAJAXを使用してロードしても現在のページをブックマークできます。

しかし、問題は、コードが前のページのURLを知る必要があり、実行するajax呼び出しを知る必要があることを意味するので、ブラウザ上で前後のボタンを使いたい場合です。タブ。プラグインは、URLとタイトルを以前のページに戻して変更することができます。そのため、これはメモリーに格納されますが、正しいAjax呼び出しを実行することができます。どのようにこのような状況に対処するためのアイデア？

さらにこれを説明するには、次の両方のこれらの二つのAjaxリクエスト

$('.globalTabs li a').live('click', function (e) { 

e.preventDefault(); 

$.ajax({ 
       url: $(this).attr('href'), 
       success: function (responseHtml) { 
        $('.mainContent').html(responseHtml); 
        History.replaceState(null, $(responseHtml).filter('title').text(), url); 
       } 
      }); 

}); 


$('.localTabs li a').live('click', function (e) { 

e.preventDefault(); 

$.ajax({ 
       url: $(this).attr('href'), 
       success: function (responseHtml) { 
        $('.localContent').html(responseHtml); 
        History.replaceState(null, $(responseHtml).filter('title').text(), url); 
       } 
      }); 

}); 

をページ上の異なる領域にURLや負荷内容を変更します。しかし、ユーザーが前後のボタンをクリックすると、コンテンツを以前のものに戻す必要があります。

たとえば、私が/About/Teamに行ってローカルになり、/Aboutから来た場合、戻るボタンをクリックすると、そのページに戻り、ローカルコンテンツのみが読み込まれます。

どうすればいいですか？プラグインは、以前のURLとタイトルを知っていることを明確にサポートしていますが、それはAJAX呼び出しを再度ロードして正しいAJAX呼び出しを行う場合にすぎません！

おかげ

Answer 1

利用History.pushState（）、代わりのHistory.replaceState（）とlistenイベントwindow.onpopstate

window.onpopstate = function(event) { 
    alert("location: " + document.location); 
    console.log(event, event.state); 
    // event.state - the state object, what you can save with 
    // History.pushState(myState, $(responseHtml).filter('title').text(), url); 
} 

詳細に：

• mozilla developers network
• HTML5 spec