[解決済み] JavascriptでjQueryを読み込み、jQueryを使用する。

質問

domにjQueryライブラリを追加しています。

 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ローダーのいくつかを使うことができますし、あるいは 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.jQuery が存在するかどうかを、繰り返し window.setTimeout . このメソッドを使ったJSFiddleはこちらです。 http://jsfiddle.net/9N7Z2/3/

あなたがする必要があることをすでに行っている人がたくさんいます。既存の JavaScript ローダーフレームワークのいくつかをチェックしてみてください。

• https://developers.google.com/loader/ (もはや文書化されていない)
• http://yepnopejs.com/ (非推奨)
• http://requirejs.org/