問題
解決策
外部javascriptファイルをJavascriptから読み込むメリット
外部javascriptファイルをJavascriptから読み込ませることで、以下の利点があります。
- 全ページ共通のものに対応できるようになります。
- プラグイン等、必要な時のみ読み込むこともできます。
今回は外部javascriptファイルをJavascriptから読み込む方法をご紹介します。
現在のscriptタグから、パスを抽出します。
scriptタグの情報を取得します。
var s = document.getElementsByTagName("script");そして、scriptタグのsrc属性から、最後のスラッシュ（/）までのパスを抽出します。
var d = s[s.length-1].src.substring(0, s[s.length-1].src.lastIndexOf("/")+1);createElementで、scriptタグを生成する。
createElementを使うことで、オブジェクトを生成することができます。
これを使い、scriptタグを生成します。
var script = document.createElement('script');type属性に情報を追加します。
type属性に「text/javascript」を追加します。
script.type = 'text/javascript';src属性に、先程抽出したパスを加えて追加します。
src属性に、先程抽出したパス情報とファイル名＋拡張子を組み合わせて追加します。
script.src = d + 'Javascriptファイル名.js';もしフルパスで読み込む必要のある場合は、先程抽出したパス情報は組み合わせず、そのまま記述して追加します。
script.src = d + 'Javascriptファイルのフルパス';async属性を任意で追加します。
async属性を適宜、追加します。
script.async = true; /* asyncを有効にする */
script.async = false; /* asyncを無効にする */appendChildで、headタグの最後に挿入する。
scriptタグの設定の準備が整ったので、これをheadタグに挿入します。
appendChildを使用することで、特定の要素内の一番最後に要素を追加することができます。
document.getElementsByTagName('head')[0].appendChild(script);これで読み込み処理は完了です。
関数にして、複数のJavascriptファイルを読み込む
複数のJavascriptファイルを読み込みたい場合は、先程までの一連の処理を関数化し、引数を使って設定を行います。
function jsloader( url, asyncs, fullpass, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
if( fullpass !== undefined ){
if( fullpass == "false" ){
// フルパスでないならば、先程抽出したパス情報とファイル名＋拡張子を組み合わせる
script.src = d + url;
}else{
// フルパスならば、引数「url」をそのまま使用する
script.src = url;
}
}
if( asyncs !== undefined ){
if( asyncs == "false" ){
script.async = false; /* asyncを無効にする */
}else{
script.async = true; /* asyncを有効にする */
}
}
if ( script.readyState ) {
script.onreadystatechange = function() {
if ( script.readyState === 'loaded' || script.readyState === 'complete' ) {
script.onreadystatechange = null;
if(callback !== undefined && callback !== ""){
callback();
}
};
};
} else {
script.onload = function() {
if(callback !== undefined && callback !== ""){
callback();
}
};
};
document.getElementsByTagName('head')[0].appendChild(script);
};
// 読み込みたいJavascriptファイル
// jsloader( ①, ②, ③, ④ )
// ① Javascriptファイル名＋拡張子、またはフルパス
// ② async情報（有効にするなら"true"、無効にするなら"false"）
// ③ フルパスか否かの情報（フルパスならば"true"、フルパスでないならば"false"）
// ④ コールバック処理
jsloader('Javascriptファイル名.js', "false","false", function() { ... });
jsloader('Javascriptファイル名.js', "false","false", function() { ... });
jsloader('Javascriptファイル名.js', "false","false", function() { ... });
jsloader('Javascriptファイル名.js', "false","false", function() { ... });
jsloader('Javascriptファイル名.js', "false","false", function() { ... });参考
【JavaScript – javascriptファイル内で外部javascriptを読み込む方法について｜teratail】
https://teratail.com/questions/41023
【lastIndexOfメソッド – Stringクラス – JavaScript入門】
https://www.javadrive.jp/javascript/string_class/index15.html
【String.prototype.substring() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring
【Node.appendChild – Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild
【createElementの使い方( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )】
http://shain.blog.conextivo.com/2007/03/createelement.html
コメント