history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。

jquery.smarthistory.js

history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、safari、iOS、Firefox4で動くと思います。

こんな感じで使います。

$('a').smarthistory({
    defaultData: $('html').html(),
    target: function() {
        return $(this).attr('href')
    },
    before: function() {
        // ajax前の処理
    },
    change: function(html) {
        $('.content').fadeOut('fast', function() {
            $(this).html( $(html).filter('.content') ).fadeIn();
        });
    }
});

DEMO

defaultDataには初期表示されるページのデータを設定します。これを指定しないといけないのは、戻るボタンで最初のページに戻ったときデータないという状態になってしまうからです。次のページからはajaxでとってきたデータをpushStateするときに保存するんですけど、最初のページだけはそのデータがないのです。ここの実装がけっこういけてない感じなのでどうにかしたいです。

targetにajaxでとってくるファイルを指定します。hrefで指定したHTMLじゃなくてjsonとかとってきたいこともあると思うのでこんな感じで指定できるようにしています。

beforeはajaxの前に走る処理です。loadingとか使うときにはここでloadingの処理を開始します。

changeはajaxでデータをとってきたときと、popstateイベント（ブラウザの戻るとか進むボタンを押したときに発火する）が発火したときに呼ばれます。ここにajaxでとってきたデータが渡ってくるので好きなようにページを書き変えます。

リンクを押すと遷移なしでコンテンツが切り替わってURLが変わるのがわかると思います。URLが変わった状態でリロードしてもHTMLは存在してるので問題ありません。