外部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('読み込み完了');
});