要約：昨日の最後に書いた裏技？を簡単に使うテンプレートというか、ユーティリティ的なローカルHTML + JavaScriptを作った。Windows7 32bit + Firefox Portable 38で動作確認。
Contents


ソースとテスト用ファイル一式
下のファイル一式を、fxAutoReload_util.zipにまとめました（2.65KB）。

testから始まる3ファイルは単なるサンプル、CSSは見栄え調整用。だから動作に最低限必要なのはHTMLとJavaScriptだけ。HTML、JavaScript、CSSの中身は次のとおり。JavaScriptは少し長いので、フレーム内スクロールで表示しています。
fxAutoReload_util.htmlSelectRawtextBitbucket
<!DOCTYPE HTML><html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="fxAutoReload_util.css">
    <script src="fxAutoReload_util.js"></script>
</head>
<body>
    <h1>Firefox Auto Reload Utility</h1>
    <div class="input">
        <input class="check" type="checkbox">
        <input class="text" value='<img src="test.png">'>
    </div>
    <div class="input">
        <input class="check" type="checkbox">
        <input class="text" value='<object data="test.svg"></object>'>
    </div>
    <div class="input">
        <input class="check" type="checkbox">
        <input class="text" value='<iframe src="test.html"></iframe>'>
    </div>
</body>
</html>
fxAutoReload_util.jsSelectRawtextBitbucket
window.addEventListener('load', function() {
    var chk = document.getElementsByClassName('check'),
        len = chk.length;
    for (var i = 0; i < len; i++) {
        var c = chk[i];
        c.id = i;
        appendTag(c);
        if (c.checked) enableAutoReload(c);
        c.onclick = function(e) { enableAutoReload(null, e); };
    }
});

function appendTag(c) {
    var v = c.parentNode.getElementsByTagName('input')[1].value;
    if (v === '') return;

    var cid = 'container' + c.id,
        d = document.getElementById(cid);
    if (d === null) {
        d = document.createElement('div');
        d.id = cid;
        document.body.appendChild(d);
    }
    d.innerHTML = v;

    var f = d.firstChild,
        tgn = f.tagName;
    if (! (tgn === 'IFRAME' || tgn === 'IMG' || tgn === 'OBJECT')) {
        d.parentNode.removeChild(d);
    }
}

function enableAutoReload(c, e) {
    var t = c || e.target,
        i = t.id,
        d = document.getElementById('container' + i),
        sid = 'script' + i,
        s = document.getElementById(sid);

    appendTag(t);
    if (d === null) return;

    if (t.checked && s === null) {
        var f = d.firstChild,
            s = document.createElement('script');
        s.id = sid;
        s.src = f.src || f.data;
        document.body.appendChild(s);
    } else if (!t.checked && s !== null) {
        s.parentNode.removeChild(s);
    }
}
fxAutoReload_util.cssSelectRawtextBitbucket
body {
    margin: 1em;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 0;
}

div.input {
    background: whitesmoke;
    margin: 10px 0;
    white-space: nowrap;
}

input.text {
    background: whitesmoke;
    border: 0;
    margin-left: -5px;
    padding: 5px;
    width: 90%;
}

input.check {
    margin-left: 10px;
    vertical-align: middle;
}


使い方
事前にFirefoxのアドオンAuto Reloadをインストール&有効にし、先ほどのZIPをローカルの適当なフォルダに解凍してHTMLをFirefoxで読み込み。すると ↓ こんな感じで、先頭に3つのタグ、続いて各タグを実際にDIV要素内に配置したものが表示されます。タグ左側のチェックボックスONでタグ内のソースの更新状態を監視し、ファイルが更新されたらHTMLを自動リロード。


タグ左側のチェックボックスをスイッチとして、昨日の最後に書いた裏技的なSCRIPTタグ（PNG、SVG、HTMLをソースファイルに指定するもの）が動的に追加されます。↓


Auto Reloadが、HTML本体だけでなく外部CSSとJavaScriptも更新状態を監視するのを利用したもの。当然ながら非JavaScriptファイルがSCRIPTタグのソースになってるため、コンソールには次の二つのエラーどちらかが出ますが、エラー前に画像等が配置されて実質問題ない模様。
SyntaxError: illegal character
SyntaxError: expected expression, got '<'


↓IMG等のタグ部分はINPUTのテキスト入力なので、HTML上でファイルを変えたり、CSSを追加可能。タグ書き換え後、いったんチェックボックスをオフにすると当該タグ部分が再描画され、続いてオンにすることで自動リロード対象になります。


今回はIMG、OBJECT、IFRAMEそれぞれ一つ配置しましたが、HTMLを編集してチェックボックス＋INPUTテキストのペアを増やせば、より多くのファイルを自動リロード対象に指定可能。

自動リロードさせたいソースファイル名が決まっていれば、このテンプレを使うより、新規にHTMLを作ってSCRIPTタグを直接書く方が簡単（昨日の最後のように）。こちらは、HTMLを作成する手間を省き、アドホックに任意のファイルで自動リロードさせたい場合向けです。