Ajaxで動的にコンテンツを入れ替えるようなWebページでも、pushState、popStateを活用すると、履歴を追加し、ブラウザバックに対応することができるらしい。ということで、調べたことを簡単にまとめました。

●pushStateとは

HTML5から追加されたHistory APIのメソッドで、ページ遷移なしでスタックのみを積む（ブラウザの履歴を追加する）ことが出来ます。

使い方は、下記のように、「第1引数 state」、「第2引数 title」、「第3引数 URL（省略可能）」の3つの引数を指定します。

history.pushState(state, title, url);

・state
　　履歴に関連付する任意のオブジェクトを渡すことができ、そのオブジェクトはpopstateイベントハンドラから
　　参照することができます。
・title
　　履歴のタイトルを指定できるようですが、現在のところ無視されるようです。
・URL
　　履歴のURLとしますが、現在のURLと異なるURLを指定してもページのリロードは発生しません。
　　相対パス、絶対パスのどちらでの指定も可能です。

●popStateイベント

ブラウザの「戻る」「進む」ボタンでページを遷移した際に発生します。
このイベントが発生した時に渡されるイベントオブジェクトのstateプロパティは、pushState()の第1引数で渡したオブジェクトが入っているので、その値に応じて処理を行えばよいようです。
このイベントは、通常の遷移では発生せず、pushState()された際だけに発生します。

jQueryの場合は、下記のようにイベントが実装できます。

// ブラウザがpushStateに対応しているかチェック
if (window.history && window.history.pushState){
    $(window).on("popstate",function(event){
        if (!event.originalEvent.state) return; // 初回アクセス時対策
    　　var state = event.originalEvent.state; // stateオブジェクト
  });
}

●対応ブラウザ
pushStateは、Chrome、Firefox、Safari、Operaの主要なブラウザはサポートしていますが、
IE9以下は未サポートになっています。
pushStete未サポートのブラウザへはHistory.jsを使うなどの対処が必要です。

■参考サイト
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
pushState / popStateの解説とQrefyにおける実践コード
[jQuery]History.jsでブラウザの戻る・進むを管理