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が署名を挿入してくれる。

<preclass="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;
            }}};