Web標準化時代のJavaScript

ダイナミック(動的)にスクリプトファイルを読み込む

通常サイトで使用されるJavaScriptは(X)HTMLファイル内のscriptタグで読み込ませます。しかし、状況によってはダイナミック(動的)にスクリプトファイルを読み込ませたい場合があります。また、(X)HTMLコーダーとスクリプター(プログラム制作者)が別々になっている場合などでは、スクリプターが(X)HTMLファイルを操作できないこともあります。このような場合には、後からスクリプトを読み込ませることで対処することができます。
この場合、ある程度利用可能なブラウザが限定されます。Firefox、Opera 8以降、Windows版のInternet Explorer 5以降、MacOS X版のSafariでは動作します。他にも動作するブラウザはあるでしょう。逆にMac版のInternet Explorer 5やiCab 3などでは動作しません。もっとも、動作するブラウザのシェア合計は非常に高いのでMac版Internet Explorer 5が含まれない限りは大丈夫でしょう。どうしても、という場合には下記の方法ではなくdocument.write()を使ってscriptタグごと書き出す、という古くからの方法を使います。
ダイナミックに読み込ませる方法ですが、新規にscriptタグ(エレメント)を生成し、ドキュメントのbodyに連結するだけです。【サンプル1を実行
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="DynamicLoad.js"></script>
<title>Sample</title>
</head>
<body>
<h1>ダイナミック(動的)にスクリプトファイルを読み込ませる</h1>
</body>
</html>

■スクリプトファイル(DynamicLoad.js
if (window.addEventListener) window.addEventListener("load", loadScript, false);
if (window.attachEvent) window.attachEvent("onload", loadScript);
function loadScript(){
var script = document.createElement("script");
script.charset = "utf-8";
script.src = "dialog.js";
document.body.appendChild(script);
}

■スクリプトファイル(dialog.js
alert("ダイナミックロードに成功しました");
ポイントとしてはwindow.onloadではなくaddEventListener/attachEventを使うということです。制作者が単独や不特定多数が利用するライブラリなどでないのであればwindow.onloadでも問題はありません。window.onloadでは、すでにイベントハンドラが定義されている場合に上書きしてしまうことになり、プログラムの動作に不具合が発生する可能性があるためです。その点、addEventListener/attachEventであれば、そのようなことはないので安心して利用することができます。ただし、addEventListener()の3番目のパラメータは必ずfalseにしてください。trueにするとOperaでは不具合が発生するためです。
また、Ajaxなどで利用されるJSON形式も、このようにして読み込ませることができます。上記のサンプルはページが読み込まれた後にスクリプトファイルを読み込みますが、いろいろなタイミング(ボタンがクリックされた時など)で読み込ませることもできます。