jquery.hashchangeでスマホ用ページ遷移に対応

スマホサイトでよくある、#(ハッシュ)を使ったページ遷移をやろうと思って調べていたら、hashchangeというのがありました。

http://benalman.com/projects/jquery-hashchange-plugin/

jqueryのプラグインです。さっそく読み込んで使ってみます。

使い方は簡単。こんな感じです。

$(window).hashchange( function(){ 
  // URLハッシュが変わったら何かする
});

さらに

$(window).hashchange(function(){ 
  if(location.hash.match(/^#hash_/)) {
    // #hash_で始まる時に何かする
  }
});

こんな感じで、ハッシュの文字列によって処理を変えてやることで、目的が実現できそうな感じです。

それから最近ではhtml5のpushStateってのもあるみたいです。こちらは今度時間のあるときに調べてみます。

※pushStateはAndroid4.1以上でサポートされるようになったみたいです。普及にはまだ少し時間がかかりそうです。