外部JavaScriptファイルを非同期で読み込む

外部JavaScriptファイルを非同期で読み込む方法をご紹介します。

関数定義

/**
 * 外部JavaScriptファイルを非同期で読み込む
 * @param {string} path 読み込むJavaScriptファイルのパス
 * @param {Function} [func] 読み込んだ後のコールバック関数
 * @param {string} [charset="utf-8"] 読み込むJavaScriptファイルの文字コード
 * @return {Element|Node} 読み込む際に使用されるscript要素を返す
 */
var getScript = function(path, func, charset) {
	var headElem   = document.getElementsByTagName('head')[0] || document.documentElement,
	    scriptElem = document.createElement('script'),
	    done       = false;

	if (typeof path !== 'string') return;

	scriptElem.charset = typeof charset === 'string' ? charset : 'utf-8';
	scriptElem.src = path;

	var callback = function() {
		if (!done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
			done = true;

			if (typeof func === 'function') func.call(scriptElem, done, path);

			scriptElem.onload = null;
			scriptElem.onreadystatechange = null;

			if (headElem && scriptElem.parentNode) {
				headElem.removeChild(scriptElem);
			}
		}
	};

	scriptElem.onload = callback;
	scriptElem.onreadystatechange = callback;

	headElem.insertBefore(scriptElem, headElem.firstChild);

	return scriptElem;
};

使い方

JavaScript

var scriptElem = getScript( path [, func, charset] );

引数

引数名 初期値 説明
path
必須
  string 読み込むJavaScriptファイルのパス
func   Function 読み込んだ後のコールバック関数
charset utf-8 string 読み込むJavaScriptファイルの文字コード

戻り値

読み込む際に使用されるscript要素を返します。

サンプルコード

JavaScript

getScript('example.js', function() {
	alert('読み込み完了');
});

JavaScript逆引きリファレンス一覧へ戻る