JavaScript で外部のテキストファイルを読み込んで表示

JavaScript の復習、みたいな。

仕事で毎月同じようなメールを送るのだが、Outlook のテンプレートだと全員で共有するがなんかめんどくさい。そこで、HTML でメールのテンプレートページを作成し、そこからコピーすればいいというような案を考えてみた。

そこでちょいと面倒になってくるのが「署名」。自分だけが使うなら HTML に JavaScript 直書きで書いてしまってもかまわないのだけど、HTML が読めない人が多い現場だとそういうわけにもいかない。

なので外部のテキストファイルの内容を HTML にインポート出来ないかどうか調べてみたところ XMLHttpRequest というのを使えばできるらしい。

function writeSignature() {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function(){
        var e = document.getElementById("*");
        for (var i = 0, j; j = e[i]; i++) {
            if (j.className === "signature") {
                j.innerHTML = xhr.responseText;
            }
        }
    });
    xhr.open("get", "./templates/signature.txt");
    xhr.send();
}

function Init() {
    writeSignature();
}

window.onload = Init;

あとは HTML に以下のように書いておけば JavaScript が署名を挿入してくれる。

<pre class="signature"></pre>

昔から JavaScript って馴染みがなくて、気づいたら Java の資格を先に取ってしまっていた。改めて JavaScript を始めてみると「あぁ、こういうことをやっていたのか」と理解できるようになってちょっぴり嬉しい。

もっと早いうちに覚えておけばよかったかなぁ。

---

追記

addEventListener が使えないブラウザ用に .onload で設定する方法もあるらしい。

    xhr.onload = function(){
        var e = document.getElementById("*");
        for (var i = 0, j; j = e[i]; i++) {
            if (j.className === "signature") {
                j.innerHTML = xhr.responseText;
            }
        }
    };