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 中使用它？

Answer 1

这里有一个有效的 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.setTimeout 轮询 window.jQuery 是否存在。这里有一个使用该方法的有效 JSFiddle:http://jsfiddle.net/9N7Z2/3/

有很多人已经完成了您需要做的事情。查看一些现有的 JavaScript Loader 框架，例如:

• https://developers.google.com/loader/(不再记录)
• http://yepnopejs.com/(已弃用)
• http://requirejs.org/