外部jsファイルから本体の関数を呼ぶには

Question

外部jsファイルを読み込んで処理する以下の1の例のようなプログラムがありました。
外部ファイルを読み込む前に処理をスタートしているからか、
get()が見つからないとエラーがでる場合がありました。

１の例）
■index.html
window.onload = function loaded(){
get('a');
}

■outer.js
function get(a){
alert(a);
}

そこで2の例のように外部ファイルから本体の関数を呼ぶようにしましたが、
これは毎回オブジェクトが見つからないとエラーがでます。

2の例）
■index.html
function loaded(){
get('a');
}

■outer.js
function get(a){
alert(a);
}
window.onload = loaded();

そこで質問なのですが、1の例からエラーが無くなる様に外部ファイルを完全に読み込んだのを判断して処理を始めるというのはどういう風に書けばいいのでしょうか？

もう一つ、2の例のように外部jsファイルから本体の関数を呼ぶにはどう書けばいいのでしょうか？（例では簡単に書いていますが実際は複雑で、本体をキックしたいのです）

ぜひアドバイスを頂ければと思っております。宜しくお願い致します。

dscripty · Accepted Answer

[ANo.3] の補足に対する回答ね。「外部ファイルも読み込んでからなのでしょうか？」うのみにしないことは、いいことだね！ | At this point, all of the objects in the document are in the DOM この文をよく読んでほしいんだけど、『この時点で、文書の中の全ての objects は、DOM の中にある。』とかかれてるよね。この objects が重要なんだけ、これは object 要素を表しているわけじゃないよ。要素も属性も、もろもろあわせて全部といういみなんだ。たとえば、下のような HTML 文書片が書かれた HTML 文書があるとするよ、

あああいいい

より汎用的に説明するために outer.js は、この HTML 文書とは別のドメインにするね。ウェブブラウザが、この HTML 文書を読み終えて、outer.js を読み込む前の状態を考えてみよう！このとき、『この時点で、文書の中の全ての objects は、DOM の中にある。』は、なりたつかな？ outer.js に次の行がかかれているとしたら、わかりやすいかな？ document.write("ううう");

dscripty · Answer

論理的な実例を示した。それでも、疑問が続くなら、その論理的な実例の意味を正しく理解できていないか、拒絶してるか、はじめから論点がずれていて、じつは、話が噛み合っていなかったかだね。あとは、質問者さんの、きもちしだいかな？

「負荷などを掛け外部ファイルの読 み込みに問題のある環境を作りだ さないと（外 部ファイルを待つという）検証は できないのではないでしょうか？」
については、[ANo.3] で答えてるから省略。

結構楽しかったし、[ANo.3] の知識を深めるきっかけになったよ。ありがとう！

dscripty · Answer

http://homepage3.nifty.com/aya_js/js2/js201.htm 更新日時: 2004年 8月 11日水曜日 7:11:30 最新の情報が書かれていないおそれがあるからきをつけて！言葉だけで攻略しようとおもったけど、なかなかのやり手なので、ちょっと日和る。とりあえず、実行してみればわかるとおもうよ。 "onloaded" と "outer.js" どっちがさきに表示される？ [onload.htm] 実例出したほうがはやいじゃないか！

実例出したほうがはやいじゃないか！

[outer.js] alert('outer.js');

fujillin · Answer

#2です。

＞window.onload = loaded();
＞は関数loaded()を実行しようとしていました。
そのままだと、パース時をloadedを実行して戻り値をwindow.onloadとしてセットすることになります。
したがって、その時点でloadedが定義済みでなければエラーになりますし、通常このような場合には
　function loaded(){
　　return function(){ get('a'); };
　}
のように、関数オブジェクトを返すようになっているのが一般的なはずです。
(window.onloadにセットするので）

ご質問で例示のものはそのようになっていないので、#2でも書きましたが、
　window.onload = loaded;
としたかったのではないかと…
こちらだと、loadedは読込み時に実行されずにwindow.onloadにセットされるだけで、onload（読込み終了時）に始めて実行されるという違いがありますが、そのあたりを混同なさっていませんか？

dscripty · Answer

「外部ファイルを読み込む前に処理をスタートしているからか、get()が見つからないとエラーがでる場合がありました。」

ということはなくて、

window.onload のイベントは、外部の JavaScript も含めて、画像だとか、CSS ファイルだとか、全部よみこまれて、ウェブブラウザに解釈されて始めて、発生するものだから、静的(※1)なものなら何処に書いていても、必ず、window.onload で指定した関数がよばれるよ。(※2)

(※1) document.createElement('src') とか xmlHttpRequest で JavaScript ファイルを後から動的に読み込ませないときのこと

(※2)↓このことが書いてあるページ

https://developer.mozilla.org/en/DOM/window.onload
| Notes
| 
| The load event fires at the end of the document loading process.
| At this point, all of the objects in the document are in the DOM,
| and all the images and sub-frames have finished loading.

http://msdn.microsoft.com/en-us/library/ms535873%28v=vs.85%29.aspx
| Remarks
|
|     The client loads applications, embedded objects, and images
| as soon as it encounters the applet, embed, and img objects
| during parsing. Consequently, the onload event
| for these objects occurs before the client parses
| any subsequent objects. To ensure that an event handler receives
| the onload event for these objects, place the script object that
| defines the event handler before the object and use
| the onload attribute in the object to set the handler.

あまりないとおもうけど、今回のようなケースで
「get()が見つからないとエラーが」
でたり、出なかったりするのは、outer.js ファイルが一時的に読み込めなくてタイムアウトになったときぐらいかな？

そうゆうわけだから、たぶん、outer.js をエディタで編集しながら、確認してて、JavaScript の構文が間違ってるときに、エラーがでて、直ったときに正常に表示されてるだけなんじゃないかな？とおもった。

fujillin · Answer

ご質問の意味が判りかねますが…

＞外部ファイルを読み込む前に処理をスタートしているからか、
ご質問通りの順で処理をしているのなら、当然エラーになるのではないでしょうか。
基本的に、ソースの読込み順に逐次処理されるはずですので、記述の順序さえ間違えなければ問題は起きないと思いますが。

ご提示の例の場合
　window.onload = loaded();
って、意図の通りでしょうか？（window.onload = loaded;　のタイポ？）

＞毎回オブジェクトが見つからないとエラーがでます。
単純に、外部ファイルの読込みが先なので、loadedが未定義ということではないのですか？

ご質問とは関係ありませんが…
外部ファイルと本体のスクリプトの使い分けをどのようになさっているのか不明ですが、外部ファイルは共通の汎用処理や定型的な処理群で構成されているのではないかと想像します。一方で、本体内のスクリプトはそのファイル個別の処理や、パラメータをセットして外部ファイル内の関数を呼び出すなどの処理になっているのではないでしょか？

＞外部jsファイルから本体の関数を呼ぶにはどう書けばいいのでしょうか
前述のように、記述の順序さえ気をつければよいと思いますが、外部と内部が上のような書き分けになっていると仮定すれば、そもそも外部の処理から直接本体を呼ぶ必要性はなくなるはずと思いますが…（外部ファイルの内容の一般性が損なわれるので）
仮に、同じ意味の処理がページによって個別の処理をせざるを得ないた事情があって本体内に記述されていたとしても、直接呼び出さずに、セットアップ時に本体側からその処理関数を引数にして渡すようにしておくなどで、一般性維持することが可能だと思われます。
どうしても直接呼び出す必然性があるのなら、それを分離することが不自然なので、全体をパッケージにして外部ファイルにしてしまった方がよいのではないでしょうか？

yambejp · Answer

なにをしたいのかいまいち理解できませんが
すなおに、外部jsの中でwindow.onloadすればよいのでは？

蛇足ですがjavascriptの文法がかなりおかしいのでもうすこし
注意深くした方がよろしいかと

外部jsファイルから本体の関数を呼ぶには

[ANo.3] の補足に対する回答ね。

この回答への補足

論理的な実例を示した。

この回答への補足

この回答への補足

#2です。

「外部ファイルを読み込む前に処理をスタートしているからか、get()が見つからないとエラーがでる場合がありました。

この回答への補足

ご質問の意味が判りかねますが…

この回答への補足

なにをしたいのかいまいち理解できませんが

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング