SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

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

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

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

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

Chrome Firefox (Gecko) Internet Explorer Opera Safari
5.0 3.6 (1.9.2) 8.0 10.6 5.0

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

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);
	});
}

関連するメモ

コメント