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がお目見えしているので、ここらへんも今後どうなっていくのか。
いろんな仕様を調べておかねばなりませんね…
コメント
本当に本当に感謝しております!これからも頑張ってくださいね!