IE8_javascript ヒントで動的に作成されたスクリプト タグの無効な onload に対する解決策

この記事の例では、IE8 で動的に作成されたスクリプト タグの無効な onload に対する解決策について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

今日プロジェクトで作業しているときに、IE8 では動的に作成されたスクリプト タグが onload イベントをトリガーできないという奇妙な問題を発見しました。

コードは次のとおりです:

コードをコピーします コードは次のとおりです:

varloadJs = function(src, fun){
var スクリプト = null; スクリプト = document.createElement("スクリプト"); script.type = "text/javascript"
; スクリプト.src = src; If(typeof fun === "関数"){
script.onload = 楽しい
}

Document.getElementsByTagName("head")[0].appendChild(script); };

loadJs("js/jquery-1.11.0.min.js", function(){
console.log("jQuery から"); });

loadJs("test.js", function(){
Console.log("test.js から"); });
test.js：
console.log(jQuery の種類);

実行結果:

コードをコピー

コードは次のとおりです: unknown // test.js の実行中、jQuery はロードされていませんまだ >> typeof jQuery // コンソールから実行すると、jQuery オブジェクトが見つかり、読み込み順序に問題があることがわかりました 「関数」 上記のコードでは、script.onload は実行されていません。コードはロードされているのに、なぜまだ onload が実行されないのでしょうか。オンラインで調べたところ、多くのフロントエンド開発者がこの困難な問題に遭遇していることがわかったので、次のような代替解決策をいくつか見つけました。

コードをコピーします

コードは次のとおりです:varloadJs = function(src, fun){ var スクリプト = null; スクリプト = document.createElement("スクリプト"); script.type = "text/javascript" スクリプト.src = src; If(typeof fun === "関数"){ script.onreadystatechange = function() { var r = script.readyState; console.log(src ": " r); If (r === 'ロード済み' || r === '完了') {

script.onreadystatechange = 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

から 実行手順は以下の通りです。onload に似た関数は見つかりましたが、jQuery ファイルをロードするときに、test.js が完了し、最初の行がロードされないという問題があります。 test.jsの内容が実行されます。 test.js は jQuery よりも先に実行されるため、unknown が出力されます。したがって、これを次のように書き換えて、線形に読み込むことができます: コードをコピー

コードは次のとおりです:

loadJs("js/jquery-1.11.0.min.js", function(){

console.log("jQuery から");
LoadJs("test.js", function(){
console.log("test.js から"); });
});

実行結果:

コードをコピーします コードは次のとおりです。js/jquery-1.11.0.min.js:loading

js/jquery-1.11.0.min.js: ロードされました

jQuery から
関数
test.js: 完了
test.js

から 今回の実行順序は完全に予約通りでしたが、上記のコードは非常にぎこちなく、階層ごとにネストする必要があったため、この記述方法を発見しました:

コードをコピーします コードは次のとおりです:varloadJs = function(src, fun){

var スクリプト = null; スクリプト = document.createElement("スクリプト"); script.type = "text/javascript"

スクリプト.src = src; If(typeof fun === "関数"){
script.onreadystatechange = function() {
var r = script.readyState; console.log(src ": " r); If (r === 'ロード済み' || r === '完了') {
script.onreadystatechange = 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("test.js から"); });

実行結果の順序も異なります:




コードをコピー


コードは次のとおりです:

関数
js/jquery-1.11.0.min.js: ロードされました

jQuery から
test.js: ロードされました
test.js

から 読み込み順を変更した場合 コードをコピーします

コードは次のとおりです:

loadJs("test.js", function(){
Console.log("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 プログラミング設計に役立つことを願っています。