JavaScriptでハッシュの変更をIE7以下など非対応ブラウザでも検知する

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

Ajax を利用してウェブサイトやアプリケーションを構築する際、 URLと処理の紐付けにハッシュの値がよく使われるかと思います。 ハッシュの変更のイベントをとるには、モダンブラウザや IE8 以降では、通常通り hashchange イベントを使用すればいいかと思いますが、対応していないマイナーブラウザでも対応させる必要があったため、実装するのに伴い簡単にまとめました。

解説

処理としては、ハッシュの値をとって変数に退避し、新たにとったハッシュの値と比較して、変更があった場合にイベントを発行する、という流れを setTimeout でループさせています。

リポジトリ

小さいライブラリとして公開しています。

https://github.com/sugarshin/chopper.js

動作確認

デモです。

https://sugarshin.github.io/chopper.js/demo/

使い方

初期化します。

var chopper = new Chopper({
  onInit: function() {},
  onChange: function(hash, newURL, oldURL) {},
  interval: 100
});

指定オプションは以下です。

  • onInit ハッシュの監視スタート時のコールバック関数
  • onChange ハッシュ変更時のコールバック関数
  • interval タイマーの監視間隔

onChange の引数には以下が渡されてきます。

  • hash 変更後のハッシュの値
  • newURL ハッシュ変更後の URL
  • oldURL ハッシュ変更前の URL

上記の newURLoldURL は、 hashchange イベントの event オブジェクトの同名のプロパティと同等に利用可能です。

https://developer.mozilla.org/ja/docs/Web/API/window.onhashchange


.on() メソッドで実行します。

chopper.on();

こちらでハッシュ変更時のコールバック関数を渡して実行することも可能です。

chopper.on(function(hash, newURL, oldURL) {});

.off() メソッドで監視を停止します。

chopper.off();

オプションでコールバック関数と停止後のハッシュ値を指定することもできます。

chopper.off(function() {}, '#after');

まとめ

以上です。

hashchange をラップしているわけではないので、それが使える状況ならそちらを使用するのがいいかと思います。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ