ファイル保存時にブラウザを自動的にリロードする JavaScript ライブラリを書きました

Develop JavaScript

HTML や CSS ファイルを保存した時にブラウザを自動的にリロードする JavaScript ライブラリ AutoReloader.js を書きました。mala さんが昔書いていたものの焼き直しですが…。

ダウンロード

https://github.com/tanabe/AutoReloader-js

使い方

下記の 1 行を対象ページの一番下に挿入します。 

<script type="text/javascript" src="auto-reloader.js"></script>

デフォルトでは対象ページのみ監視します。
XMLHttpRequest を使用していますので HTTP 経由でご使用ください。

他のファイルを監視対象にする

例えばページで使用している CSS ファイルも監視するには、AutoReloader.add メソッドを使います。

AutoReloader.add("style.css");

AutoReloader.add は複数ファイルを指定できます。例えば上記に加えて SWF ファイルも監視したい場合は

AutoReloader.add("style.css", "index.swf");

このように記述します。

CSS や JavaScript を一気に監視対象にする

AutoReloader.add で追加するのが面倒ならば、 

AutoReloader.watchCSS();

や

AutoReloader.watchJS();

を呼び出すことでページで使用している CSS や JS ファイルを一括で監視対象にできます。

iPhone でも動きます

iPhone (Mobile Safari) でも動きますので、リロードのために端末を手にすることなくコーディングができます。さくっとプロトタイプを作るときに自分は使っています。また、IE 6 でも動きます。