Ajaxコンテンツでも手軽に「進む」「戻る」を実装できるjQuery hashchange event

「iPadが薄くて軽くなったら買うね」と言っておきながらiPad2を傍観しているminamiです。 今回は便利なjQueryのプラグインの紹介です。

Ajaxでも「進む」「戻る」ボタンを使いたい

Ajaxを利用して、ページ遷移することなくコンテンツを展開するWebページも増えてきていると思いますが、URLが遷移しないので、ブラウザの「進む」「戻る」ボタンを使ってさかのぼることができないのがネックです。

そこで最近よく見かける手法が、URL中の"#"以下の文字列を元にページの情報を表示する方法です。TwitterのPCページなどでも取り入れられています。ちなみにこの方法の是非についてもいろいろと議論があるようですが（主に検索エンジン対策）、そこは割愛します・・・

jQuery hashchange eventを使う

jQuery hashchange eventは、jQueryのプラグインとして公開されています。これを使えば手軽にAjaxコンテンツでもブラウザの「戻る」「進む」ボタンを機能させることができます。具体的にいうと、url欄の"#"以下が変わった際に動作するhashchangeイベントを追加することができます。

• jQuery hashchange event

使い方はかなりお手軽です。まずjQueryのプラグインなので、以下のようにページに読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.js"></script>

その後windowに対してhashchangeイベントをbindします。

$(function(){
	$(window).hashchange(function(){
		//ハッシュタグが変わった時に実行する処理
	});
	
	$(window).hashchange();//Windowロード時に実行
});

これだけで、URL中のハッシュが変わったタイミングでいろいろと実行することができます。Ajaxコンテンツでもブラウザの「戻る」「進む」を有効にできます！

まとめ

やっかいなIE6,IE7対応を考えなくてもよいのも楽チンです。この用途に使うならjQuery hashchange eventで決まりではないでしょうか！