外部jsファイルを読み込む為に以下のような記述をしました。


http://test.com/aaaa/test.jsの中身は単なる
alert(test_ok);
しか記述がないです。

aaa.jsの中身は

deferLoader('http://test.com/aaaa/test.js');
function deferLoader(filepath,callback){
var sc = document.createElement('script');
sc.setAttribute('defer', true);
sc.type = 'text/javascript';
window.external_script_onload = filepath;
sc.src = filepath;
document.body.appendChild(sc);
}

ただし、IE7で実行すると、上手く行きません。
ブラウザがすぐビジー状態になってしまう。

ついでに、window.external_script_onload
ってどういううごきなんですかね?

以下のページを参考にしているのですが
いまいちわかりません。

http://d.hatena.ne.jp/os0x/20080827/1219815828

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2009/10/20 17:20:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答2件)

id:mattn No.1

回答回数104ベストアンサー獲得回数23

ポイント35pt

まずご理解されているかと思いますがexternal_script_onloadはid:os0xさんが決めた特定のコールバック名であって、windowオブジェクトに用意されたプロパティや関数ではありません。

実際に http://ss-o.net/js/callback_test.php にアクセスしてみると分かる通り、宣言されていれば外部からでもJSONP的に呼び出すよ!という仕組みでしかありません。

ちなみにexternal_script_onloadはcallbackを設定するのであって、filepathを指定する物ではありません。

※ビジー状態になっている原因は他にあるかと思います。

ですので、勝手にやりたいだろう事を推測させて頂くとすると

aaa.js

function deferLoader(filepath,callback){
  var sc = document.createElement('script');
  sc.setAttribute('defer', true);
  sc.type = 'text/javascript';
  window.external_script_onload = callback;
  sc.src = filepath;
  document.body.appendChild(sc);
}
deferLoader('http://test.com/aaaa/test.js', function(data) {
  alert(data); // loaded
});

test.js

alert('test ok');
if(typeof external_script_onload=='function')external_script_onload("loaded");

となります。元々は外部javascriptのロード完了を判断するのにid:amachangがタイマを使ってロードされたオブジェクトを監視していたのに対して、id:os0xさんが読み込み対象のスクリプトを少し弄ればロード完了イベントを受け取れるよ...と記事にした物かと思います。

私が一番良いんじゃないかな...と思ったのはid:os0xさんの記事にあるJavaScriptLoader

function JavaScriptLoader(src, callback){
	var sc = document.createElement('script');
	sc.type = 'text/javascript';
	if (window.ActiveXObject) {
		sc.onreadystatechange = function(){
			if (sc.readyState == 'complete') callback(sc.readyState);
			if (sc.readyState == 'loaded') callback(sc.readyState);
		};
	} else {
		sc.onload = function(){
			callback('onload');
		};
	}
	sc.src = src;
	document.body.appendChild(sc);
}

がクロスブラウザかつ読み込み対象を修正しなくて良いという点で一番利用価値があると思います。

id:hopefully

JavaScriptLoaderを使ってみたのですが

IEだと、ページを中断しますみたいな

メッセージがあがってきてしまいます・・・

なんでだろう・・

2009/10/13 18:31:40
id:mattn No.2

回答回数104ベストアンサー獲得回数23

ポイント35pt

HTMLのドキュメントが読み込まれていない間にJavaScriptLoaderを呼び出した...という事はないですか?

ちなみに私の環境IE7だとうまく動いています。

<html>
<head>
<script type="text/javascript">
function JavaScriptLoader(src, callback){
	var sc = document.createElement('script');
	sc.type = 'text/javascript';
	if (window.ActiveXObject) {
		sc.onreadystatechange = function(){
			if (sc.readyState == 'complete') callback(sc.readyState);
			if (sc.readyState == 'loaded') callback(sc.readyState);
		};
	} else {
		sc.onload = function(){
			callback('onload');
		};
	}
	sc.src = src;
	document.body.appendChild(sc);
}

window.onload = function() {
	JavaScriptLoader('foo.js', function() {
		alert('foo.jsが読み込まれました。');
		alert(window.foo); // hello world
	});
}
</script>
</head>
</html>

foo.js

window.foo = "hello world";
id:hopefully

window.onload = function() {

}

これだ・・

もっと詳細に提示しなくてすいません。

まず、AJAXでjsを使うHTMLをPHP側で、file_get_contentsします。

で、その後、その内容をinnerHTMLで返した後に、JSの中で

JavaScriptLoaderを実行しているので

読み込んだかどうかの判定が出来ないのかな・・

AJAX部分を一番下で実行すればいいんかな・

ちょっとやってみます。

色々、ありがとうございます。

最後に一点だけ教えて欲しいのですが、jsファイルを複数読み込みたい場合は

どうしたらいいでしょうかね?

srcの引き数を複数で、callbackはひとつにしたいのですが・・

2009/10/13 19:52:10
  • id:mattn
    普通にfunction宣言した物を渡せばいいと思いますよ。:)
    >|javascript|
    var scripts = ['foo.js', 'bar.js', 'baz.js']
    function my_callback() {
    // something to do
    }
    for(var n = 0; n < scripts.length; n++)
    JavaScriptLoader(scripts[n], my_callback);
    ||<
  • id:hopefully
    ありがとうございます。ですが

    エラー: uncaught exception: [Exception... "Out of Memory" nsresult: "0x8007000e (NS_ERROR_OUT_OF_MEMORY)"

    というのがあがってきますね・・

    なんだろう・・
  • id:mattn
    んー。無限にスクリプトを読み込んでませんか?スクリプトから同じスクリプトを読み込んでいるとか。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません