外部jsファイルから別の外部jsファイルの関数を呼び出したい．

観覧ありがとうございます．

asp.net mvc4 ，C#でプロジェクトの改修をしています．
外部jsファイルから別の外部jsファイルの関数を呼び出したいです，
ご教示ください．

調べて以下の方法を試しましたがうまくできませんでした．

javascript
1###hoge.js
2function hogefunction(form) {
3 document.write("<script type='text/javascript' src='piyo.js'></script>");
4 window.onload = function(){piyofunction(form, url);};
5}

詳しいコードについては会社からでないと見れないので今はわかりません．
申し訳ありません．
覚えている限り下記に示します．

javascript
1function piyo.js(form,url) {
2  // フォームとurlを指定してwindow.openでurl先を開く処理．
3  window.open(url);
4}

hoge.jsを使用しているhtmlは

html
1  <head>
2// 略
3 <script type="text/javascript" src="../Scripts/hoge.js"></script>
4</head>
5<body>
6// 略
7 <input type="button" value="button" onClick="hogefunction(document.forms[0], '../Views/a.cshtml')">
8</body>

MakeNowJust

2016/08/28 02:20

piyo.jsの内容も教えてください。それと、コードなどはMarkdownのコードブロックを使って見易くしてもらえると助かります。 https://teratail.com/help

MakeNowJust

2016/08/28 02:22

些細な話ですが、観覧という言葉はこの文脈で使うことはまず無いと思います。閲覧が適切かと思いますが、謝辞は求めていないので書かなくても構いません。

MakeNowJust

2016/08/28 02:23

可能ならば、hoge.jsをscriptタグで読み込んでいるHTMLファイルも教えてください

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

回答3件

ベストアンサー

JavaScriptで動的に読み込む必要はあるのか?

膨大なソースコードでない限り動的に読み込む必要はないと自分は思います。
htmlに2つScriptタグを使って読み込ませればいいと思いますよ。

html
1<script src="piyo.js"></script>
2<script src="hoge.js"></script>

また読み込む順番に注意が必要です。
hoge.jsからpiyo.js内の関数を呼び出したい場合は、事前にpiyo.js内で定義されている関数が作られている必要があります。その場合、hoge.jsより先に読み込まないといけないので注意してください。

#どうしても動的に読み込みたい

私達は貴方の今の状況が分からないので一応方法をお教えしておきます。
基本的にはjQuery等使うといいと思います。

また状況は違うと思うのですが、node.jsであればrequire()と言う関数を使って読み込む事も可能です。

■jQueryを使って読み込む方法

js
1$.getScript("piyo.js");

この様に記述するだけで読み込めます。またコールバック関数と言うので読み込んだ後に処理したい事を記述する事も可能です。

js
1$.getScript("piyo.js" function(){
2  //code..
3});

■node.jsの場合の読み込む方法

js
1var script = require("piyo.js");

node.jsを使っていて読み込む場合はこの様に記述出来ます。

主に代表的な読み込む方法をご紹介しました。

投稿2016/08/29 02:04

fukumi822

総合スコア228

fukumi822

2016/08/29 02:08

補足 : 他の方へのコメントでの「htmlファイル側で2つのjsファイルを読み込むとjsファイルから他のjsファイルの関数を呼べるようになるのでしょうか？」と言う質問に対して、基本的に読み込み元のHTMLをベースにJavaScriptは動作します。 HTMLで読み込んだ物全てを各JavaScriptファイルから操作する事が可能になります。またJavaScriptはHTMLファイル上で連結させられるので、読み込む順番さえ間違えなければ失敗はしません。

shikasama

2016/08/29 06:20

fukumi822様ご回答ありがとうございます。読み込む順番を確認してみましたところ、順番が逆になっていたみたいでした。 ```html <script src="piyo.js"></script> <script src="hoge.js"></script> ``` を ```html <script src="hoge.js"></script> <script src="piyo.js"></script> ``` に直すことで実現できました。ありがとうございます。

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

document.writeを使って動的にJavaScriptを読み込む方法はあまり推奨し、document.writeを呼び出すタイミングによっては問題が起こることがあります。また、DOMを制御してスクリプトを読み込むのもそこそこ難しいです。

また、質問者様のコードを見た限り、スクリプトをプログラム的にロードしようとしていますが、これは本当に必要なことなのでしょうか？
HTMLファイルに複数の<script>タグを並べて複数のJavaScriptファイルを読み込むのが無難かと思います。

HTML
1<script src="piyo.js"></script>
2<script src="hoge.js"></script>

投稿2016/08/28 02:27

編集2016/08/28 03:06

MakeNowJust

総合スコア545

shikasama

2016/08/28 03:42

情報不足で申し訳ありません．質問文を修正いたしました． htmlファイル側で2つのjsファイルを読み込むとjsファイルから他のjsファイルの関数を呼べるようになるのでしょうか？

MakeNowJust

2016/08/28 03:49

恐らくは呼べるはずです。呼べなければ理由を考えます。

shikasama

2016/08/28 04:24

明日，会社で試してみようと思います．ありがとうございます．

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

いろいろ検証してみたところ以下の方法が一番安定していて、動作の仕組みも理解しやすいと思います。

javascript
1// このコードはIE7以降有効です
2var req = new XMLHttpRequest();
3req.open("GET", "読み込むjsファイル", false);
4req.send("");
5 
6// 上のreq.openでは同期通信(false)を指定しているので以下はレスポンスを待ってから実行される。
7// 文字列をjavascriptとして実行。
8eval(req.responseText);