web-dev-qa-db-ja.com

AJAX / jQueryを使用してページとhistory.pushState（）メソッドをロードすることでブラウザの「戻る」ボタン機能を維持する

AJAX（jQuery loadメソッド）を介してページをロードし、history.pushStateメソッドを介してURLをブラウザーバーにプッシュするときに、戻るボタンの機能を保持したい。この問題は、ブラウザの[戻る]ボタンを1回クリックし、最初のクリックで前のURLのみが復元され、前のページが読み込まれない場合に発生します。

これまでの私のコードは次のとおりです。

$(function(){
  var profile_url= "/profile";
   $('#click_button').click(function(){
      $('#main_content').load(profile_url);
      history.pushState({profile:profile_info}, "profile", profile_url);
   });
});

私の質問は、戻るボタンを最初にクリックしたときに、前のページを#main_contentdivにAJAXロードする方法はありますか？

どんな助け/アドバイスも大歓迎です。

javascriptajaxjquerybrowser-historypushstate
12
tim peterson

この質問をすることに最終的に興味を持ったことを実現するPJAXと呼ばれるjQueryプラグインにすべての人を誘導したいと思います。 Pjax（）は、jQuery AJAXとpushStateを組み合わせて、ページの読み込みとブラウザーの履歴の保存を行います。

これが コード であり、これが 素敵なデモ のpjax()の動作です。

デモでは、pjax()の機能を示すためにあるチェックボックスをクリックすることを忘れないでください。

13
tim peterson

このためには、「popstate」イベントをサブスクライブする必要があります。

Popstateイベントは、セッション履歴エントリに移動するときに発生する場合があります。 HTML5仕様

あなたはこのようにこれを行うことができます：

window.onpopstate = function() {
  $('#main_content').load(location.href)
};
11
Anton Timmermans

この目的でpopstateイベントを使用できます。詳細については、 https://developer.mozilla.org/en/DOM/window.onpopstate を参照してください。

History.js もご覧ください。これはラッパーを提供し、ブラウザーが履歴APIをサポートしていない場合にURLハッシュタグにフォールバックできます。

1
ThiefMaster