JavaScript | XMLHttpRequest()で別のjsファイルを読み込む方法

2020-01-122023-02-15JavaScript ファイル・ディレクトリ,JavaScript

JavaScriptのXMLHttpRequest()を使って別のJavascriptファイルを読み込んで、その先のJavaScript関数を実行する方法になります。

JavaScript内で別のJavaScriptファイルを読み込むサンプルコード

サンプルコードではテスト用の別のJavaScriptファイルを「betu.js」として用意しています。

sample = function (file) {
	text = 'abcdefg';
}

XMLHttpRequest()を使って、別のJavaScriptファイル「betu.js」を呼び出すサンプルコードです。

let text = '';

loadFile = function (file) {
		let request = new XMLHttpRequest();
		request.open('GET', file, false);
		request.send(null);
		Function(request.responseText)();
}

loadFile('betu.js');

console.log(text);
// abcdefg

open()の第3引数は「fasle」を指定して同期読み込みにします。
「true」にして非同期読み込みにすると読み込む対象の別ファイルが読み込まれる前に、そのファイル内のユーザー定義関数のsample()を実行しようとして、関数またはファイルの見つかりませんとエラーになります。