我正在使用以下方法将 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 加载器，或者通过 watch forwindow.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 Loader 框架，例如：
还有另一种动态加载 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不加载其他资产产生阻止你的页面，所以没有必要创建一个回调函数。
<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(){...
不能保证脚本已准备好（并且永远不会）。
这不是最优雅的解决方案，但它是可行的。本质上，您可以每 1 秒检查一次 jQuery 对象广告是否在加载了您的代码时运行了一个函数。我还会添加一个超时（比如在运行 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);