javascriptファイル内で外部javascriptを読み込む方法について

###実現したい事
jsファイルを編集していましたが、重複する記述が複数のjsファイルでできたため一箇所に分けてそれを読み込むことにしたいと思いました。

jsファイルはHTMLに読み込ますことはよくやっているので分かるのですが、jsファイル内で他のjsファイルを読み込むにはどうすればいいでしょうか？

簡単なことだと思いますが、今までやったことがないため分からない状態です。
検索してもhtmlへjsファイルを読み込むという方法ばかり出るため質問させていただきました。

##追記

main.jsとinclude.jsがあるとします。
main.jsで、include.jsを読み込み、include.jsにある変数を利用したいです。

javascript
1document.write("<script type='text/javascript' src='include.js'></script>");

これで読み込む方法は分かったのですが、これだとinclude.jsにある変数を使えません。

どのように読み込めばmain.jsでinclude.jsの変数が利用できるでしょうか？

##具体的なコード

javascript
1//・・・・・・・・・・・include.js
2
3var froala_setting = {
4        language: 'ja',
5        toolbarButtons: ['insertImage','insertVideo','insertTable','undo', 'redo']
6      };
7   
8
9//・・・・・・・・・・・main.js
10
11//include.jsを読み込み
12
13$('.content').froalaEditor(froala_setting);
14
15//froala_setting変数をmain.jsで使いたいです。
16

やりたいことはこれだけです。

kei344

2016/07/14 02:06

追記部分について、include.js の内容次第で利用できるかどうかが決まるため、ある程度コードを開示していただけませんか？

takumi123

2016/07/14 02:30

コードを追記しました。

kei344

2016/07/14 05:59

実行されている環境はブラウザでしょうか？

takumi123

2016/07/14 06:03

はい、ブラウザです。

行動規範の内容に同意します

回答4件

ベストアンサー

順番の必要なタイプのファイルについては注意が必要ですが、以下のようにすれば、
遅延ロードのように、.jsファイルから.jsファイルを読み込むことができます。

まずは、<script></script> を作る必要がありますので、

var script = document.createElement('script');

とします。
次に、scriptの種類を決めます。
といっても、最近のブラウザは自動で判定してくれるほど高性能なので必要はありませんが、
一応書いておくと良いでしょう。

script.type = 'text/javascript';

その次は、scriptのurlの指定です。

<script src="../../../main.js"></script>

のように、scriptにはurlを指定する必要があります。
ですから、

script.src = 読みこみたいファイルのurl;

とします。ここでは、仮に ../js/main.js としましょう。
まとめると以下のようになります。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '../js/main.js';

これで読み込めます。
しかしこれでは一般性に欠けるので、関数化します。

function loadScript(url) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
};

これでokです。

ただしこれでは順番には読み込まれません。
というのも、

loadScript('../js/main.js');
loadScript('../js/sub1.js');
loadScript('../js/sub2.js');

というように複数のファイルを読みこむ際、
何らかの影響で読み込み順番がずれてしまうことがあります。
そこで、callbackを使って読みこめるようにします。

script.onload = function() {
  //... callback
};

ただしこれはIEには対応していません。
そこで、IEにも対応するように処理を切り替えてやります。

if ( script.readyState ) {
  //... IEの処理
} else {
  //... IE以外の処理
};

IEについて、読み込み後に他ファイルの読み込みをしたいので、
IEの読み込み後のイベントを見ますが、やはりIEです。
イベントがめちゃくちゃな発生をしています(発生したりしなかったり…)。

そこでIEのある２つのイベントをいじってこれに対応させます。

script.readyState === 'loaded'
script.readyState === 'complete'

この2つのうちいずれか一つ、または両方のイベントが発生していれば、
callbackを実装できます。

if ( script.readyState === 'loaded'
  || script.readyState === 'complete' ) {
  callback();
};

しかしこれでは前ファイルの読み込み後に行われる確信がありません。
というのも、いくつもreadystatechangeが発生すると、
その順番に読みこまれるとは限らないからです。
そこで、1ファイル読み込み時はreadystatechangeを消すという策を取ります。

if ( script.readyState === 'loaded'
  || script.readyState === 'complete' ) {
  script.onreadystatechange = null;
  callback();
};

これでおkです。
あとは以上をまとめて、

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  if ( script.readyState ) {
    script.onreadystatechange = function() {
      if ( script.readyState === 'loaded' || script.readyState === 'complete' ) {
        script.onreadystatechange = null;
        callback();
      };
    };
  } else {
    script.onload = function() {
      callback();
    };
  };

  document.getElementsByTagName('head')[0].appendChild(script);
};

としましょう。

ああ、document.getElementsByTagName('head')[0].appendChild(script);
これを忘れないようにしましょう。
これは、<head></head>に<script></script>要素を付け加えるためのもので、
これがないと読みこめません。

なお使い方ですが、このように拡張することで、

loadScript('main.js', function() {
  loadScript('sub1.js', function() {
    //... 他処理
  })
});

というように遅延ロード+他処理ができます。

#追記
申し訳ありません。いくつか訂正をさせて頂きました。

最後のcallbackを使った読み込みに関して、

loadScript('main.js', function() {
  //...callback
});
loadScript('sub1.js', function() {
  //...callback
});

とするのは、遅延ロードを実装した意味がなくなりますのでご注意ください。
もちろんファイルを読みこむごとに…というのは可能ですが、
ファイルごとに読みこみ順番がある場合、例えばライブラリ使用時などは、
注意が必要です、ということです。
というのも、順番が反転することがあるからです。

#追記2
質問者様の追記を読みました。

上記説明に加えて、ロードしたファイルの変数の使用ですが、
callback内で使用することができます。
例えば sub.js の variable という変数を main.js 内で複数使う際には、

loadScript('sub.js', function() {
  console.log(variable);
  //...variableに関する処理
});

とすればよいです。

投稿2016/07/13 22:23

編集2016/07/14 07:29

glapd332

総合スコア75

takumi123

2016/07/14 00:26

詳細な回答本当にありがとうございます。ただ、HTMLにリンクを出力する形では、外部javascriptの変数を利用できません。追記しましたが、この実現にはどうすればいいでしょうか？

kei344

2016/07/14 06:50

> HTMLにリンクを出力する形では、 glapd332さんの書かれている方法はHTMLにただリンクを出力しているのではなく、そのロードを待って変数を受け取れる状態にしています。 main.js内でloadScript( 'include.js', function (){/* 変数を使う処理 */}); というようにすれば、変数を使うことが出来ます。

行動規範の内容に同意します

include.jsでグローバル変数を作成していた場合、非同期でチェックして使う必要があります。

// HTMLに読み込みコードを出力した後で、中にあるvar someVariableを使う場合
(function loop(){
  if(!('someVariable' in window)){
    setTimeout(loop, 100);
    return;
  }
  // ここでwindow.someVariableを使って処理をすすめる
})();

include.jsの中で無名関数を切っていて、その中で宣言された変数については、アクセスする方法はありません。

投稿2016/07/14 01:31

maisumakun

総合スコア145930

javascript
1document.write("<script type='text/javascript' src='読み込むファイル名'></script>");

と記述すると、読み込むことが出来ます。
しかし、注意点があって、

javascript
1window.onload = function(){ 
2
3};

の外に必ず記述しましょう。

最後に、include.jsを読み込むサンプルです。
良い例

javascript
1document.write("<script type='text/javascript' src='include.js'></script>");
2window.onload = function(){
3///include.jsを使う処理
4};

悪い例

javascript
1window.onload = function(){
2document.write("<script type='text/javascript' src='include.js'></script>");
3};

投稿2016/07/13 21:25

vsmorse

総合スコア68

takumi123

2016/07/14 00:26

回答ありがとうございます！ただ、HTMLへの出力では読み込んだjsファイルの変数を利用することができません。この実現にはどうすればいいでしょうか？

vsmorse

2016/07/17 02:57 編集

window.onload = function()を使っていますか？使っていないと、動きません。

行動規範の内容に同意します

http://www.jiichan.com/programming/programming.php?lang=js&no=03

投稿2016/07/13 17:50

NS-DOS

総合スコア110

takumi123

2016/07/14 00:26

回答ありがとうございます。拝見させていただきます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javascriptファイル内で外部javascriptを読み込む方法について

最後に、include.jsを読み込むサンプルです。
良い例

悪い例

関連した質問

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

最後に、include.jsを読み込むサンプルです。 良い例

悪い例

関連した質問

最後に、include.jsを読み込むサンプルです。
良い例