問題 × 解決策

外部javascriptファイルをJavascriptから読み込む方法

問題

外部JavascriptファイルをJavascriptから読み込ませたい。

解決策

scriptタグを生成し、リンク先等を設定してheadタグの最後に挿入する。

 

外部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

【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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 + eight =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧