人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptでの外部JSファイル読み込み完了を知る方法は?

Javascriptで外部JSを読み込むように以下のように書くとします。
document.write('<script src="xxxxxx.json"></script>');

ここで、そのJSが読み込まれた後にしたい処理を呼ぶのにどうすればいいのか困っています。
さらに、このようによびたいファイルは3つあり、それぞれともに呼び込み終わったら、これをするというようにしたと思っています。

読み込みたいファイルがJSONなので、変数名がかぶることも考慮したいところではあります。
例:params={?}というJSONを3つ呼び出した場合、paramsという変数がファイルが呼び出されるたびに
上書きされるような気がしています。これもなんとかならないでしょうか?


●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript js JSON Write かぶる
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● openseed
●27ポイント

<script>
function callback(id, data){
// ?
}
</script>

<script src="xxxxxx_01.jsonp"></script>
<script src="xxxxxx_02.jsonp"></script>
<script src="xxxxxx_03.jsonp"></script>

として、xxxxxx_01.jsonp は、

callback("xxxxxx_01", {aa: 1, bb: 2, cc: 3});

のようにしては、いかがでしょうか?

※ JSファイルの場合は、外部ファイルの一番最後に、callback を記述すれば、スクリプトの読み込みを判定することが出来ると思います。

◎質問者からの返答

JSONPにするということですか。考えても見ませんでしたが、それはできないんです。

既存のJSONを使ってなので、できれば他の方法はないでしょうか?


2 ● y-kawaz
●27ポイント

JSONを扱うんでしたら、&ltscript src="xxx"&gt で無理やり読み込むのではなく、AJAXで xxxxxx.json 読み込み、responseText を eval するのが良いんじゃないでしょうか?

その際 params={?} となっている外部スクリプトは params= を削除して {?} の部分だけにしておくのがコツです。


サンプルコードを作ってみました。

<html>
<script>
function getXMLHttpRequest() {
 try {
 return new XMLHttpRequest();
 } catch(e) {
 try {
 return new ActiveXObject("Msxml2.XMLHTTP");
 } catch(e2) {
 try {
 return new ActiveXObject("Microsoft.XMLHTTP");
 } catch (failed) {
 return false;
 }
 }
 }
}
var xmlhttp = getXMLHttpRequest();
xmlhttp.open('GET', 'xxxxxx.json', true);
xmlhttp.onreadystatechange = function() {
 if(xmlhttp.readyState == 4) {
 if (xmlhttp.status == 200) {
 var params = eval('(' + xmlhttp.responseText + ')');
 alert('foo=' + params.foo + "\n");
 } else {
 alert('AJAX failed');
 }
 }
}
xmlhttp.send(null);
</script>
<body>
AJAX and JSON
</body>
</html>

・getXMLHttpRequest関数はXMLHttpRequestオブジェクトをIEやFirefoxなどブラウザの違いを吸収するものです。

・xmlhttp.readyState == 4 はリクエストが完了したステータスをチェックしています。

・xmlhttp.status == 200 はリクエスト成功をチェックしています。ファイルが見つからない場合は 404 等が返ってきます。

・この2つのif文をくぐった場所が、xxxxx.js の読込完了時に実行される部分になります。

・ここでevalを使いxxxxx.jsonの中身を評価してローカル変数 params にセットしています。

・その後のアラートはただのテストです。


上記サンプルは以下のURLに置いておきましたので試してみてください。

http://www.kawaz.jp/tmp/ajax-json/


3 ● openseed
●26ポイント

クロスドメインで、タイマーを利用した方法です。

テストは、最小限しかしていないので、ご了承ください。

<html>
<head>
<script>
function callback(src, params){
alert(src + ":" + params);
}

var scripts = ['aaa1.json', 'aaa2.json', 'aaa3.json'];
var params = null;
function loadJson(n){
var s = document.createElement('script');
s.charset = 'utf-8';
s.src = scripts[n];
document.getElementById('scripts').appendChild(s);
var limit = 10;
var t = setInterval(function(){
if(limit-- == 0){
clearInterval(t);
callback(scripts[n], null);
if(++n < scripts.length){
loadJson(n);
}
}else if(params != null){
clearInterval(t);

callback(scripts[n], params);
params = null;
if(++n < scripts.length){
loadJson(n);
}
}
}, 500);
}
</script>
</head>
<body onload="loadJson(0);">
<div id="scripts" style="display: none"></div>
</body>
</html>

◎質問者からの返答

なるほど。タイマーでチェックするんですね

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ