URLのハッシュを監視する(＃, シャープ, フラグメント識別子)

Tweet

Category JavaScript 2012/03/01

twitterやfacebookのURLのような、# や #! の活用例。

#以降の文字列はサーバーには送られないため、javascriptで認識、区別する。

今どきのWebブラウザはページ内リンクなどでハッシュに変化があると、hashchangeイベントを発生させてくれる。

ただし　hashchangeイベントをサポートしているのは以下のブラウザ。

対象がこれらのブラウザならば、これだけでハッシュの変化を監視できる。

JavaScript

$(function(){
    $(window).on('hashchange', function(){
        alert(location.hash);
    });
});

Demo

#test1
#test2
#test3
#test4
#test5

もしhashchangeイベントに対応していないブラウザでもハッシュの監視をしようと思ったら、タイマー監視してイベントを発火させる感じになるでしょうか。

if ("onhashchange" in window) {
	//この場合はhashchangeイベントをサポートしているので何もしなくてよい
} else {
	//hashchangeイベントをサポートしていない場合だけ特別に、0.1秒ごとにハッシュを見る処理を追加する
	$(function(){
		var hashWatch = (function (){
			var hash = null;
			return function(){
				var tmp = location.hash;
				if(tmp != hash){
					$(window).trigger("hashchange");
					hash = tmp;
				}
			}
		})();
		setInterval(function(){hashWatch()}, 100);
	});
}