QA@IT

Ajaxを使って外部スクリプトを読み込む方法

2534 PV

jQueryの$.getScript()に相当する処理をフレームワークなしで書こうと思っています。しかし、コールバックの処理をどうしたらいいかわかりません。

たとえば、swfobjectが読み込まれていないときに自動的にswfobjectを読み込むという処理を考えてみます。

var swfname = 'foo.swf';
var id = 'bar';
if (typeof(swfobject)=== 'undefined'){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js', true);
    xhr.onreadystatechange = function(x){
        if (xhr.readyState == 4 &&( xhr.status == 200 || xhr.status == 201)) {
            var sc = document.createElement('script');
            sc.text = xhr.responseText + "\n" + 'swfobject.embedSWF("' + swfname + '", "' + id + '", 1, 1, "10.0.0",null,{allowscriptaccess: "always"});';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(sc, s);
        }
    };
    xhr.send(null);
}else{
    swfobject.embedSWF(swfname, id, 1, 1, "10.0.0",null,null,{allowscriptaccess: "always"});
}

とりあえず動きますが、この方法だと、swfobjectが存在しないときは、読み込んだスクリプトと実際実行したい処理を単にをScriptタグのテキストノードに入れているだけでなんか違う気がします。それになんだか、スマートではありません。

実際どうしたらいいでしょうか?

回答

なるほど。
生成したタグそのものにonloadイベントを割り当てるところがポイントですね。
$.ajax({type:'script'...})でも同等のことができるので、てっきりxhrを使っているのかと思っていました。

編集 履歴 (0)

好みの問題だと思うので「実際どうしたらいい」というのはないと思いますが、jQuery(の内部処理)風に書くとこんな感じになります(サンプルなのでいろいろ端折ってます)。

var swfname = 'foo.swf';
var id = 'bar';
if (typeof(swfobject)=== 'undefined'){
    var sc = document.createElement('script');
    sc.src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js';
    sc.onload=function(){
        swfobject.embedSWF(swfname, id, 100, 100, "10.0.0",null,null,{allowscriptaccess: "always"});
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(sc, s);
}else{
    swfobject.embedSWF(swfname, id, 50, 50, "10.0.0",null,null,{allowscriptaccess: "always"});
}

http://jsfiddle.net/bs86H/

ちょっといじればcallbackのfunctionを受け取る形にはできそうですね。
ちなみにswfのサイズはわかりやすくするために変えてあります。

編集 履歴 (1)
ウォッチ

この質問への回答やコメントをメールでお知らせします。