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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

4回答

84808閲覧

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

takumi123

総合スコア59

JavaScript

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

0グッド

10クリップ

投稿2016/07/13 14:08

編集2016/07/14 02:31

###実現したい事
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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

はい、ブラウザです。
guest

回答4

0

ベストアンサー

順番の必要なタイプのファイルについては注意が必要ですが、以下のようにすれば、
遅延ロードのように、.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/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 (){/* 変数を使う処理 */}); というようにすれば、変数を使うことが出来ます。
guest

0

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

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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()を使っていますか? 使っていないと、動きません。
guest

0

投稿2016/07/13 17:50

NS-DOS

総合スコア110

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takumi123

2016/07/14 00:26

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問