AJAXのloadとhistory.pushStateの推奨される順序は何ですか？

Question

たとえば、jQueryでは、リージョンに何かをロードするためのリンクを設定すると、history.pushStateを呼び出す前にコンテンツをロードする必要がありますか？

また、history.pushStateを呼び出した後にコンテンツを読み込む必要がありますか？

$('#link').click(function() { 
    history.pushState(null, null, 'newUrl'); 
    $('#region').load('regionContent'); 
    return false; 
}); 

かつて私はコンテンツがないまでURLは変更されないと感じ、私はより頻繁に、後者を見てきました（例えばhttps://github.com/blog/760-the-tree-slider）ので、私は考えられているので思ったんだけど、私には望ましいと思われますベストプラクティス。

Answer 1

両方の例では、ユーザーが戻るボタンを押すと、コンテンツは変更されません。あなたはあなたの状態変更ハンドラの中に何も持っていないので。

基本的にこれを実行したいと思う：

$('#link').click(function() { 
    History.pushState(null,null,'newUrl'); 
}); 
$('body').bind('statechange',function(){ 
    $('#content').load(History.getState().url); 
}); 

これは、このリンクをクリックすると、ページの状態が変更されますそれを作る、そしてあなたのページの状態を考えると、それを変更したことだろう新しいコンテンツに読み込まれます。ブラウザの戻るボタンを押すと、状態が変わり、新しいコンテンツが読み込まれます。

は、今ここで私は、異なる時刻での状態変更イベントを発生させますHistory.jsのstatechange、代わりにネイティブpopstateとState.urlなど、さまざまなブラウザのHistory.getState().urlを使用していました。例えば、サファリは、ページロード時の状態変更イベントで、chromeとfirefoxはそうではありません。あなたのコンテンツがsafariに2回ロードされる原因になります。 History.jsは、すべてのブラウザで一貫性のあるAPIを提供しています。また、HTML4ブラウザでさえもハッシュに頼ることを望むなら、History.jsは一貫したAPIを提供します。