javascript - JavaScript で jQuery を読み込み、jQuery を使用する

Question

次を使用して、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 に入ったら使用するにはどうすればよいですか?

score 147 · Accepted Answer

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

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

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

// Immediately-invoked function expression
(function() {
  // Load the script
  const script = document.createElement("script");
  script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
  script.type = 'text/javascript';
  script.addEventListener('load', () => {
    console.log(`jQuery ${$.fn.jquery} has been loaded successfully!`);
    // use jQuery below
  });
  document.head.appendChild(script);
})();

IE8 などの非常に古いブラウザーをサポートする必要がある場合、イベントハンドラーloadは実行されないことを覚えておいてください。その場合、window.jQueryrepeated を使用しているかどうかをポーリングする必要がありますwindow.setTimeout。ここにその方法で動作する JSFiddle があります: http://jsfiddle.net/9N7Z2/3/

あなたのやるべきことはすでにやり遂げた人がたくさんいます。次のような既存の JavaScript ローダーフレームワークのいくつかを確認してください。

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

score 8 · Accepted Answer

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 が「悪い習慣」と見なされる理由を参照してください。理由のために。長所は、ページが他のアセットをロードするのdocument.writeをブロックするため、コールバック関数を作成する必要がないことです。

score 6 · Accepted Answer

Encosia の Web サイトでは次のことを推奨しています。

<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>

score 3 · Accepted Answer

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がページに既に存在するかどうかを最初に確認したい場合は、これを試してください

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

このエラーが発生する理由は、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);

javascript - JavaScript で jQuery を読み込み、jQuery を使用する

8 に答える 8

Related

Reference