Mach3.laBlog

JS備忘録: script要素でonload

この記事は賞味期限切れです。(更新から1年が経過しています)

人は忘れる生き物。
今日はscript要素でloadイベントを検知する方法など。

onloadで全部いけるかと思いきや、
IEではscript要素のonloadは動作しません。(相変わらずコイツは…
なので、代替としてonreadystatechangeを使います。

function onloaded(){
    alert("successfully loaded");
}
var ele = document.createElement("script");
ele.src = "hogehoge.js";
ele.onload = onloaded;
ele.onreadystatechange = function(){
    if(this.readyState=="loaded"||this.readyState=="complete"){
        onloaded();
    }
}
document.body.appendChild(ele);

これで動作する模様。
readyStateで条件分岐している部分は、
キャッシュから読む場合とそうでない場合で値が異なるとかなんとか。

さて、onloadedで受け取れる引数ですが、
IE以外のonloadならばイベントオブジェクトが渡されるので

e.target.src

とかやればscript要素のURLがとれたりします。
が、IEのonreadystatechangeはケチなので(!?)何も渡してくれない模様。
そこで、受け側でscript要素の情報が欲しかったりする場合は、
多少強引ですがこんな感じにしてみます。

function onloaded(e){
    alert(e.target.src + " is successfully loaded");
}
var ele = document.createElement("script");
ele.src = "hogehoge.js";
ele.onload = onloaded;
ele.onreadystatechange = function(){
    if(this.readyState=="loaded"||this.readyState=="complete"){
        onloaded({type:"load", target:this});
    }
}
document.body.appendChild(ele);

IEも9がお目見えしているので、ここらへんも今後どうなっていくのか。
いろんな仕様を調べておかねばなりませんね…

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

d-nd258e9d92cb8859d339b22d09f059291
先日の案件でこの記事に助けられました。
本当に本当に感謝しております!これからも頑張ってくださいね!