JavascriptでjQueryをロードし、jQueryを使用します

以下を使用して、jQueryライブラリをdomに追加しています。

 var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

しかし、私が実行すると：

jQuery(document).ready(function(){...

コンソールはエラーを報告します：

Uncaught ReferenceError: jQuery is not defined

jQueryを動的にロードし、DOMに入ったら使用するにはどうすればよいですか？

ここに小さな例を含む動作中のJSFiddleがあり、これはあなたが探しているものを正確に示しています（私があなたの要求を誤解していない限り）：http：//jsfiddle.net/9N7Z2/188/

javascriptを動的にロードするその方法にはいくつかの問題があります。jQueryのような非常に基本的なフレームワークに関しては、実際には静的にロードしたいと思うでしょう。そうしないと、JavaScriptロードフレームワーク全体を作成する必要があるからです...

既存のJavaScriptローダーのいくつかを使用することも、window.jQuery定義されるのを監視して独自のローダーを作成することもできます。

// Immediately-invoked function expression
(function() {
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    script.onload = function() {
        var $ = window.jQuery;
        // Use $ here...
    };
    document.getElementsByTagName("head")[0].appendChild(script);
})();

IE8のような本当に古いブラウザーをサポートする必要がある場合、loadイベントハンドラーは実行されないことを覚えておいてください。その場合、window.jQuery繰り返し使用することの存在をポーリングする必要がありますwindow.setTimeout。ここにそのメソッドで動作するJSFiddleがあります：http：//jsfiddle.net/9N7Z2/3/

あなたがしなければならないことをすでにやった人はたくさんいます。次のような既存のJavaScriptローダーフレームワークのいくつかを確認してください。

• https://developers.google.com/loader/（文書化されなくなりました）
• http://yepnopejs.com/（非推奨）
• http://requirejs.org/

jQueryを動的にロードする別の方法があります（source）。あなたも使うことができます

document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');

使用するのは悪い習慣と考えられていますがdocument.write、完成させるために言及するのは良いことです。

document.writeが「悪い習慣」と見なされる理由を参照してください。理由のために。プロISdocument.write他assestsをロードするから、あなたのページをブロックしないので、コールバック関数を作成する必要はありません。

Encosiaのウェブサイトは以下を推奨しています：

<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
  google.load("jquery", "1.7.2");

  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

しかし、彼でさえ、最適なパフォーマンスに関しては、次のことを行うこととは比較にならないことを認めています。

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
    <script type="text/javascript" src="scripts.js"></scripts>
</body>
</html>

jQueryの読み込みが完了した後にコードを実行する必要があります

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload = function(){
    // your jQuery code here
} 

または、非同期関数で実行している場合awaitは、上記のコードで使用できます

var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await script.onload
// your jQuery code here

jQueryがページにすでに存在するかどうかを最初に確認したい場合は、これを試してください

このエラーが発生する理由は、JavaScriptがスクリプトのロードを待機していないため、実行すると

jQuery(document).ready(function(){...

スクリプトの準備ができているという保証はありません（そして決して準備ができていないでしょう）。

これは最も洗練されたソリューションではありませんが、実行可能です。基本的に、jQueryオブジェクトがコードをロードしたときに関数を実行するかどうかを1秒ごとに確認できます。チェックが無期限に発生しないように、タイムアウト（20回実行した後のclearTimeoutなど）も追加します。

var jQueryIsReady = function(){
    //Your JQuery code here
}

var checkJquery = function(){
    if(typeof jQuery === "undefined"){
        return false;
    }else{
        clearTimeout(interval);
        jQueryIsReady();
    }
}
var interval = setInterval(checkJquery,1000);

require.jsを使用すると、同じことをより安全に行うことができます。jqueryへの依存関係を定義し、名前空間を汚染することなく、ロード時に依存関係を使用して必要なコードを実行できます。

私は通常、Javascriptへのすべての依存関係を管理するためにこのライブラリをお勧めします。シンプルで、リソースの読み込みを効率的に最適化できます。ただし、JQueryで使用する場合は注意が必要な場合があります。それらに対処するための私のお気に入りの方法は、このgithubリポジトリで説明されており、次のコードサンプルに反映されています。

<title>jQuery+RequireJS Sample Page</title>
   <script src="scripts/require.js"></script>
   <script>
   require({
       baseUrl: 'scripts',
       paths: {
           jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
       },
       priority: ['jquery']
    }, ['main']);
    </script>

HTML：

<html>
  <head>

  </head>
  <body>

    <div id='status'>jQuery is not loaded yet.</div>
    <input type='button' value='Click here to load it.' onclick='load()' />

  </body>
</html>   

脚本：

   <script>

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
        }

        // dynamically load any javascript file.
        load.getScript = function(filename) {
          var script = document.createElement('script')
          script.setAttribute("type","text/javascript")
          script.setAttribute("src", filename)
          if (typeof script!="undefined")
          document.getElementsByTagName("head")[0].appendChild(script)
        }

        </script>

DevToolsコンソールから、次を実行できます。

document.getElementsByTagName("head")[0].innerHTML += '<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><\/script>';

https://code.jquery.com/jquery/で利用可能なjQueryのバージョンを確認してください。

ロードされているかどうかを確認するには、Javascriptを使用してjqueryがロードされているかどうかを確認するを参照してください。