Last Updated 2012/02/04
Programming Tips Web  索 引 
HTML 動的外部ファイル読込
2012/02/04

HTML で動的に外部ファイルを読み込みたくていろいろ試したけど,IE では表示出来て,FireFox では表示出来なかった。

以下の関数を HTML の HEAD 内に置く。

function addScript( url ){
    var el = document.createElement("script");
    el.setAttribute("type/javascript");
    el.setAttribute("src",url);
    el.setAttribute("charset","UTF-8");
    document.getElementsByTagName("HEAD")[0].appendChild(el);
}

HTML の BODY に以下の様にして JavaScript を呼び出す。
(strFile は動的に決定する)

<script type="text/javascript"><!--
    addScript(strFile);
//-->
</script>

呼び出す JavaScript は document.write してるだけ。

やりたい事は,HTML の内容を動的に変更したい。その為に数パターンの JavaScript のファイルを作成。その中では document.write して HTML を吐き出す。

IE では動いてくれた。動的に内容が変わった。
でも FireFox では動いてくれない。エラーメッセージを調べるとこんなんだった。

「非同期で読み込まれた外部スクリプトからの document.write() の呼び出しは無視されました。」

appendChild() の後に alert() を入れると更新される。ダイアログが出た後に,ちゃんと内容が表示された。
addScript() を呼び出す前後に HTML 出力とかしてみると表示される順番が IE と FireFox で違う事に気付く。


参照
前後のTips
HTML 動的外部ファイル読込

DSS ProgrammingTipsCGI Ver2.02