ProgrammingJavaScript講座JavaScriptテックラボ
JavaScriptテックラボ

JavaScript内から外部JavaScriptを読み込む方法

JavaScriptのコード内からほかのJavaScriptを読み込む方法を紹介します。
特定の条件によりJavaScriptを読み込みたいときなどに有用です。

処理の流れとしては、まずDOMのcreateElement()メソッドでSCRIPT要素を生成し、読み込みたいファイルを指定します。あとは生成された要素をappendChilde()メソッドを使ってBODY要素の最後に追加します。

// SCRIPTタグの生成
var el = document.createElement("script");

// SCRIPTタグのSRC属性に読み込みたいファイルを指定
el.src = "parts.js";

// BODY要素の最後に追加
document.body.appendChild(el);

これで次のようなHTMLコードが閉じBODYタグの上の行に追加されます。

<script src="parts.js"></script>

何度も使うような場合は関数にしておくと良いでしょう。

function appendScript(URL) {
	var el = document.createElement('script');
	el.src = URL;
	document.body.appendChild(el);
};

次のように呼び出します。

appendScript("parts.js");

CSSもcreateElement()メソッドを使って読み込むようにすることができます。ここでは、CSSの追加先をHEAD要素内にしています。

function appendCss(URL) {
	var el = document.createElement('link');
	el.href = URL;
	el.rel = 'stylesheet';
	el.type = 'text/css';
	// HEAD要素の最後に追加
	document.getElementsByTagName('head')[0].appendChild(el);
}

呼び出し方は次の通りです。

appendCss("parts.css");

関連記事