16

以下の状況で困っています。

  1. ユーザーがサイトにアクセス
  2. ユーザーが history.pushState を使用して URL を更新するリンクをクリックする
  3. ajax 経由で読み込まれた部分的なページ コンテンツ (jQuery を使用)
  4. ユーザーが通常のリンクをクリックすると、新しいページが読み込まれます
  5. ユーザーがクリックして pushState エントリに戻る
  6. ページには、ajax を介して取得されたページの部分のみが表示されるようになりました

さまざまなことに pushState を使用してサイトを強化した結果、驚くほど応答性の高い Web アプリが作成されましたが、この問題により、これを使用できなくなりました。

コードのサンプルを次に示します。

$('a').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});

popstate = function(url){
  $('#content').load(url);
}
window.onpopstate = function(event){
  popstate(window.location.href);
  event.preventDefault();
}

ノート：

  • window.onpopstate 関数にアラートを配置すると、ステップ 5 でイベントがトリガーされないように見えます。これはバグですか?
  • この問題は、ajax が使用されている場合にのみ発生します。
  • pushState の後に呼び出すことができるように、popstate 関数を分離する必要がありました。window.onpopstate イベントを手動でトリガーする方法はありますか?
4

1 に答える 1

19

一部のブラウザは、ajax を介してロードされた部分部分と、そのレイアウトで装飾されたページ全体を混同することがよくあるようです。これは、どちらも同じ URL を持っているためです。そのため、ユーザーが [戻る] ボタンをクリックすると、ブラウザーは URL を読み込まず、以前に ajax 経由でダウンロードした部分のみを表示します。

これを回避し、2 つの個別の内部キャッシュ (部分ページ用とページ全体用) を維持するには、ajax 経由で呼び出すときに URL に GET パラメーターを追加する必要があります。コードで次のようにします。

popstate = function(url){
  $('#content').load(url+'?_ajax=1');
}

お役に立てれば。

于 2011-07-26T20:31:11.527 に答える