Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン

Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。

使い方はとても簡単で
windowにhashchangeイベントをbindするだけです。

$(window)
  .hashchange(function() {
    Hoge(location.hash.replace('#', ''));
  }); // ハッシュフラグメントが変わったときにHoge()を実行する

$(window).hashchange(); // Windowロード時に実行できる

Ben Alman » jQuery hashchange event
jQuery hashchange eventのデモ

実際にhashchange eventプラグインを利用して作ったサイト
松本クリニック

hashchangeイベントというのは

fugafuga

のようなハッシュフラグメントリンクをクリックしたときにURLが

http://hogehoge.com/

から

http://hogehoge.com/#fugafuga

のように変わるタイミングで実行されるイベントです。

「戻る」「進む」が使えないと何度もクリックして中身が切り替わってるのに、いきなりだいぶ前のページに戻ってしまうのでユーザーを迷わせてしまいがちです。ユーザーがコンテンツを便利に閲覧できるようにhashchangeプラグインのようなものの利用はぜひ検討すべきでしょう。

具体的な使い方については次回の記事に続きます。続きませんでした・・・が、トリガーになるリンクの話など少し書きました。