動的に生成されたJQueryスクリプトタグでスクリプトが実行されない

Question

私は外部JSファイル（例：test.js）に次のコードを持っています。これは、JQueryソースがまだ存在しないことを検出した場合、JQueryソースを指す追加のスクリプトタグを作成します。コードは実際にスクリプトタグを作成し、作成中の実際のスクリプトの前に挿入します。

if (typeof(jQuery) == "undefined") { 
var head = document.getElementsByTagName("head")[0]; 
// get any and all script tags 
var scripts = document.getElementsByTagName("script"); 
// the actual script call the actions (ie: this one "test.js") 
thisScript = scripts[scripts.length - 1]; 
// create element 
var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); 
head.insertBefore(script,thisScript); 
} 

上記はうまくいきます。しかし、私が抱えている問題は、JQueryのソーススクリプトタグが作成されると、残りの "test.js"コードが機能しなくなることです。これは、コードがJQuery関数にアクセスできない（またはJQueryがそこにあるかどうかを知らない）かのようです。

したがって、「test.js」に次のコードは動作しません。

$(document).ready(function() { 

// ... 

}); 

私はFF 12とFirebugのに応じて取得していますエラーは次のとおりです。 すべてのアイデアを「$が定義されていません」なぜこれが起こっているのか、それともどうすれば解決できるのでしょうか？

注：私はターゲットページにJQueryを配置することができます。しかし、これはオプションではありません。 JQueryが存在するかどうかをコードで検出できる必要があります。そうでない場合は、JQueryを指すスクリプトタグを作成し、Jqueryコードを実行します。

Answer 1

あなたは、あなたがやっている手動のようなスクリプトタグを挿入すると、そのスクリプトが非同期的にロードされます。つまり、ページの他の部分は、そのスクリプトがロードされるのを待つことはありません。

これは、ページのソースにスクリプトタグが存在する場合とは異なります。その場合、スクリプトは同期的にロードされ、ページの他の部分はスクリプトがロードされるまで実行されません。

この結果、動的に挿入されたスクリプトタグが読み込まれ、解析されて実行されるまで、ページの残りのJavaScriptが実行されています。したがって、jQueryをインストールする前にjQueryを使用しようとしています。同期その負荷何かに

1. 変更あなたのjQueryのスクリプトタグの挿入を：

   私はあなたの問題を解決するための二つのオプションを認識してんです。私がそれをするために知っている唯一の方法は、document.write()を使用して新しいスクリプトタグを文書に書き込んだり、あなたがやっているように頭の部分に挿入したりしないことです。 document.write()で文書に追加されたものは、同期処理されます。

2. スクリプトを動的に挿入し続けますが、スクリプトが正常に読み込まれたことを知るように監視イベントを追加し、jQueryを使用する初期化コードを実行するだけです。正常に読み込まれました。

2番目のオプションを実行するスクリプト読み込みライブラリ（require.jsなど）もあります。

Answer 2

ロードオーダーに問題があるようです。 jQueryがまだロードされていないため、 '$が定義されていません'というエラーが発生します。次に、jQueryをロードします。これはもちろん最初のスクリプトをリロードしないので、エラーが起きます。

Answer 3

これは、ここで回答されていますCheck if jQuery is included in Header (Joomla)

if (typeof jQuery == 'undefined') { 
    var head = document.getElementsByTagName("head")[0]; 
    script = document.createElement('script'); 
    script.id = 'jQuery'; 
    script.type = 'text/javascript'; 
    script.src = 'js/jquery.js'; 
    head.appendChild(script); 
}