この記事では、IE8のScript Tag Onloadの無効な作成の解決策について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
今日、私がプロジェクトに取り組んでいたとき、私は奇妙な問題を見つけました。動的に作成されたスクリプトタグは、IE8の下でオンロードイベントをトリガーできません。
コードは次のとおりです。
次のようにコードをコピーします:var loadjs = function(src、fun){
var script = null;
script = document.createelement( "script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onload = fun;
}
document.getElementsByTagname( "head")[0] .appendChild(script);
};
loadjs( "js/jquery-1.11.0.min.js"、function(){
console.log( "jquery");
});
loadjs( "test.js"、function(){
console.log( "from test.js");
});
test.js:
console.log(typeof jquery);
実行結果:
コードを次のようにコピーします:未定義の// test.jsが実行されているとき、jqueryはまだロードされていません
>> typeof jquery //コンソールから実行しますが、jqueryオブジェクトを見つけて、荷重順序の問題を証明します
"関数"
さらに、script.onloadは上記のコードで実行されません。コードがロードされているので、なぜまだ実行されていないのですか?オンラインでチェックした後、多くのフロントエンド開発者がこの困難な問題に遭遇したことがわかりました。したがって、次のようにいくつかの選択肢が見つかりました。
次のようにコードをコピーします:var loadjs = function(src、fun){
var script = null;
script = document.createelement( "script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function(){
var r = script.readystate;
console.log(src + ":" + r);
if(r === 'loaded' || r === 'complete'){
script.oneadystatechange = null;
楽しい();
}
};
}
document.getElementsByTagname( "head")[0] .appendChild(script);
};
実行結果:
次のようにコードをコピーします:未定義
JS/jQuery-1.11.0.min.js:読み込み
test.js:完了します
test.jsから
JS/jQuery-1.11.0.min.js:ロード
jqueryから
実行ステップは、オンロードと同様の関数が見つかったが、問題があることです。順番にロードされていません。 jQueryファイルが読み込まれている場合、test.jsが完了し、最初の行が最初に実行されます。 test.jsはjqueryの前に実行されるため、未定義が作成されます。したがって、このように書き換えて、線形にロードすることができます。
コードコピーは次のとおりです。LoadJS( "JS/jQuery-1.11.0.min.js"、function(){
console.log( "jquery");
loadjs( "test.js"、function(){
console.log( "from test.js");
});
});
実行結果:
次のようにコードをコピーします:JS/jQuery-1.11.0.min.js:読み込み
JS/jQuery-1.11.0.min.js:ロード
jqueryから
関数
test.js:完了します
test.jsから
今回は、実行順序は正確に予約した順序でありますが、上記のコードは厄介に見え、レイヤーごとにネストされたレイヤーである必要があるため、この書き込み方法を再度発見しました。
次のようにコードをコピーします:var loadjs = function(src、fun){
var script = null;
script = document.createelement( "script");
script.type = "text/javascript";
script.src = src;
if(typeof fun === "function"){
script.onreadystatechange = function(){
var r = script.readystate;
console.log(src + ":" + r);
if(r === 'loaded' || r === 'complete'){
script.oneadystatechange = null;
楽しい();
}
};
}
document.write(script.outerhtml);
//document.getelementsbytagname("head") [0] .AppendChild(script);
};
loadjs( "js/jquery-1.11.0.min.js"、function(){
console.log( "jquery");
});
loadjs( "test.js"、function(){
console.log( "from test.js");
});
実行結果も異なります。
次のようにコードをコピーします:関数
JS/jQuery-1.11.0.min.js:ロード
jqueryから
test.js:ロード
test.jsから
読み込み順序を変更した場合
コードコピーは次のとおりです。loadjs( "test.js"、function(){
console.log( "from test.js");
});
loadjs( "js/jquery-1.11.0.min.js"、function(){
console.log( "jquery");
});
実行結果は異なり、同様に順番にロードされます。
次のようにコードをコピーします:未定義
test.js:ロード
test.jsから
JS/jQuery-1.11.0.min.js:ロード
jqueryから
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。