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

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

ただいまの
回答率

90.33%

  • JavaScript

    17609questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 7
  • VIEW 44K+

takumi123

score 25

実現したい事

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

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

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

追記

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

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

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

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

具体的なコード

//・・・・・・・・・・・include.js

var froala_setting = {
        language: 'ja',
        toolbarButtons: ['insertImage','insertVideo','insertTable','undo', 'redo']
      };


//・・・・・・・・・・・main.js

//include.jsを読み込み

$('.content').froalaEditor(froala_setting);

//froala_setting変数をmain.jsで使いたいです。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/14 11:06

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

    キャンセル

  • takumi123

    2016/07/14 11:30

    コードを追記しました。

    キャンセル

  • kei344

    2016/07/14 14:59

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

    キャンセル

  • takumi123

    2016/07/14 15:03

    はい、ブラウザです。

    キャンセル

回答 4

checkベストアンサー

+11

順番の必要なタイプのファイルについては注意が必要ですが、以下のようにすれば、
遅延ロードのように、.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のある2つのイベントをいじってこれに対応させます。

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/14 09:26

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

    キャンセル

  • 2016/07/14 15:50

    > HTMLにリンクを出力する形では、
    glapd332さんの書かれている方法はHTMLにただリンクを出力しているのではなく、そのロードを待って変数を受け取れる状態にしています。

    main.js内でloadScript( 'include.js', function (){/* 変数を使う処理 */}); というようにすれば、変数を使うことが出来ます。

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/14 09:26

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

    キャンセル

0

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


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

window.onload = function(){ 

};


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

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

良い例

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

悪い例

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/14 09:26

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

    キャンセル

  • 2016/07/17 11:54 編集

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

    キャンセル

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17609questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。