2

外部 JS ファイル (つまり、test.js) に次のコードがあります。これにより、JQuery ソースがまだ存在しないことが検出されると、JQuery ソースを指す追加のスクリプト タグが作成されます。コードは実際に script タグを作成し、作成を行っている実際のスクリプトの前に挿入します。

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 コードを実行します。

4

3 に答える 3

3

スクリプト タグを手動で挿入すると、そのスクリプトは非同期で読み込まれます。つまり、ページの他の部分は、そのスクリプトが読み込まれるまで待機しません。

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

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

あなたの問題を解決するための 2 つのオプションを認識しています。

  1. jQuery スクリプト タグの挿入を、同期的に読み込まれるものに変更します。私が知っている唯一の方法は、document.write()あなたが行っているように head セクションに挿入するのではなく、新しい script タグをドキュメントに書き込むために使用することです。ドキュメントに追加されたものは、document.write()同期的に処理されます。

  2. 引き続きスクリプトを動的に挿入しますが、監視イベントを追加して、スクリプトが正常にロードされたことを認識し、jQuery が正常にロードされたという通知を受け取った後にのみ jQuery を使用する初期化コードを実行します。

2 番目のオプションを実行するスクリプト ロード ライブラリ (require.js など) もあります。

于 2012-05-08T21:44:00.793 に答える
0

読み込み順序に問題があるようです。jQueryがまだロードされていないため、「$ is not defined」エラーがトリガーされます。次に、jQuery をロードします。もちろん、これは最初のスクリプトをリロードしないため、エラーが発生します。

于 2012-05-08T21:43:08.700 に答える
-1

これはここで回答されています: jQueryがヘッダーに含まれているかどうかを確認してください(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); 
}
于 2012-05-08T21:43:34.253 に答える