我使用以下方法将 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
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/
关于javascript - 使用 Javascript 加载 jQuery 并使用 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10113366/