JavaScriptで外部のJavaScriptを読み込む

外部ファイルのJavaScriptをJavaScriptで読み込む方法を試してみました。

サンプルコード

ボタンをクリックしたタイミングでjsファイルを追加されるようにしてみます。

<button id="btn">読み込み追加</button>

scriptタグで追加するとjsが実行されるようです。
ボタンクリック時にjsファイルを2つ追加してみます。

$(function() {
	$('#btn').on('click', function() {
		add_script('test1.js');
		add_script('test2.js');
	});
});

function add_script(src) {
	$('body').append('<script src=' + src + '></script>');
}

追加するファイルは以下の2つです。

test1.js

alert('test1です。');

test2.js

$(function() {
	alert('test2です。');
});

ボタンをクリックしたタイミングでjsファイルが追加され、アラートが表示されました。
jsファイルを追加するデモページ

jQueryではなく素のJavaScriptの場合、以下のようになります。

document.getElementById('btn').addEventListener('click', function() {
	add_script('test1.js');
	add_script('test2.js');
}, false);

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

jsファイルを追加するデモページ2
　

【参考サイト】

• 動的にJSを実行する方法 – Qiita