htmlファイルに別のtxtファイルの内容を読み込ませる

HTML JavaScript

とりあえず，インラインフレームを使ってみた．

<body>
    <iframe src="sample.txt" title="sample">
        この部分はインラインフレームを使用
    </iframe>
</body>

その後，その読み込ませた内容の文字サイズを変更したかったんだけど，そこでつまづいた．
インラインフレーム内の文字の大きさ - 質問・相談ならMSN相談箱
上記を参考にJavaScriptでやろうとしたんだけど，

<body>
    <script type="text/javascript">
<!--
var fSize = "9pt";
var ifr = document.getElementById('sample');
var ifrDoc = (ifr.contentDocument ) ? ifr.contentDocument : ifr.contentWindow.document ;
ifrDoc.body.style.fontSize = fSize;
// -->
    </script>
    <noscript>
        JavaScriptを使用してます．
    </noscript>
    <iframe src="sample.txt" title="sample" id="sample">
        この部分はインラインフレームを使用
    </iframe>
</body>

これだと文字のサイズが変わってくれない．
Firebugを使うと，エラーが発生していて，どうやら，ifrに正しく値がセットされていないらしいことが分かった．
んで，Firebugのコンソールでalert(ifr);を実行すると確かに，nullになっている．
もしかしたら，実行されるタイミングが関係するのか？と思って調べてみると，まさにその通りだった．

404 Not Found

JavaScriptが実行される位置よりも後にid指定された要素、例えばgetElementById()なんかが記述されていると、その要素が取得出来ないということをつい最近知りました。

最終的には，window.onloadを使って以下のようになった．

<body>
    <script type="text/javascript">
<!--
window.onload = function() {
   var fSize = "9pt";
   var ifr = document.getElementById('sample');
   var ifrDoc = (ifr.contentDocument ) ? ifr.contentDocument : ifr.contentWindow.document ;
   ifrDoc.body.style.fontSize = fSize;
}
// -->
    </script>
    <noscript>
        JavaScriptを使用してます．
    </noscript>
    <iframe src="sample.txt" title="sample" id="sample">
        この部分はインラインフレームを使用
    </iframe>
</body>

あまり勉強せずに，JavaScriptを見よう見まねで使っているからこんなことになる，ちゃんと勉強しよう．
そもそも，iframeを使うという選択肢で良かったのだろうか．