如果尚未加载 jQuery，我该如何加载它？答案

【问题标题】：How can I load jQuery if it is not already loaded?如果尚未加载 jQuery，我该如何加载它？
【发布时间】：2011-10-12 09:21:29
【问题描述】：

我有一个 initializor.js，其中包含以下内容：

if(typeof jQuery=='undefined')
{
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'jquery.js';
    headTag.appendChild(jqTag);
}

然后我将该文件包含在另一个页面的某个位置。代码检查是否加载了 jQuery，如果没有加载，则将其添加到 Head 标记中。

但是，jQuery 没有初始化，因为在我的主文档中，我声明了一些事件来测试它。我也试过在check下面写一些jQuery代码，Firebug说：

“jQuery 未定义”。

有没有办法做到这一点？ Firebug 在 head 标签内显示 jquery 包含标签！

另外，我可以在$(document).ready() 事件中动态添加代码吗？或者不是只需要在几个元素上添加一些 Click 事件吗？

【问题讨论】：

是的，你可以继续使用 $(document)。如果它已经加载，jQuery 会立即触发它。

标签： javascript jquery dynamic

【解决方案1】：

jQuery 无法立即使用，因为您正在异步加载它（通过将其附加到<head>）。您必须向脚本 (jqTag) 添加一个 onload 侦听器，以检测它何时加载，然后运行您的代码。

例如

function myJQueryCode() {
    //Do stuff with jQuery
}

if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'jquery.js';
    jqTag.onload = myJQueryCode;
    headTag.appendChild(jqTag);
} else {
     myJQueryCode();
}

【讨论】：

会试试的！在那里添加我的按钮 onclick 处理程序，对吗？
是的，还有任何需要 jQuery 的东西。如果已经定义了 jQuery，您还需要运行代码。
这等于 jQuery 的 onready 事件吗？因为我们都听说过在 ready 事件中编写事件处理程序，对吧？
成功了，谢谢！！此外，这是所有解决方案中最轻松的解决方案:)
@luqita 看看stackoverflow.com/questions/4845762/…

【解决方案2】：

要包含 jQuery，你应该使用这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js">\x3C/script>')</script>

它使用Google CDN，但提供了一个回退并具有协议相对 URL。

注意：请务必将版本号更改为最新版本

如果定义了window.jQuery，它将不会继续读取该行，因为它是一个或已经包含一个真值，否则它将（记录）写入该值
见：theHTML5Boilerplate

另外：如果没有定义 jQuery，你忘记了引号：

typeof window.jQuery === "undefined" //true
typeof window.jQuery == undefined //false ,this is wrong

你也可以：

window.jQuery === undefined //true

【讨论】：

我包含的 js 文件，不会包含在页面顶部，而是包含在 div 或其他内容中。我不能使用 createElement 方法吗？
它应该可以工作，但你不会称它为看到帖子的结尾，我会将它附加到正文中。而且您应该始终在页面末尾加载 JS（页面速度/渲染的最佳实践）
@gar-onn - 你为什么要做“===”？当我这样做时，Firebug 对我尖叫。我把我的改成了 if(typeof jQuery=="undefined")
我错过了备忘录吗？为什么你和 Steve 告诉 Jeff 使用旧版本的 JQuery？
这个对我很有用！关闭脚本标记时的“\x3C/Script>”部分是我需要的部分。我尝试用 document.write 写出脚本标签，但即使在引号中，“”也被检测为脚本结束标签。

【解决方案3】：

如果你在异步函数中，你可以像这样使用await：

if(!window.jQuery){
    let 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 */

如果不是，您可以使用(async function(){/*all the code*/})() 将所有代码封装并运行在一个内

.

或者，重构Adam Heath's answer（这在 IMO 中更具可读性）。最重要的是，您需要在 jQuery 加载完成后运行 jQuery 代码。

jQueryCode = function(){
    // your jQuery code
}

if(window.jQuery)  jQueryCode();
else{   
    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 = jQueryCode;
}

或者你也可以把它封装在一个函数中来改变代码的顺序

function runWithJQuery(jQueryCode){
    if(window.jQuery)  jQueryCode();
    else{   
        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 = jQueryCode;
    }
}
runWithJQuery(function jQueryCode(){
    // your jQuery code
})

【讨论】：

【解决方案4】：

YepNope 加载器可用于有条件地加载脚本，语法非常好，易于阅读，他们的网站上有一个示例。

您可以从their website 获取。

示例取自他们的网站：

 yepnope([{
   load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
   complete: function () {
     if (!window.jQuery) {
       yepnope('local/jquery.min.js');
     }
   }
 }

【讨论】：

我宁愿在没有任何第三方库的情况下这样做:)

【解决方案5】：

这个网站代码解决了我的问题。

function loadjQuery(url, success){
     var script = document.createElement('script');
     script.src = url;
     var head = document.getElementsByTagName('head')[0],
     done = false;
     head.appendChild(script);
     // Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
         done = true;
         success();
         script.onload = script.onreadystatechange = null;
         head.removeChild(script);        
    }
};
}
 if (typeof jQuery == 'undefined'){

loadjQuery('http://code.jquery.com/jquery-1.10.2.min.js', function() {
        // Write your jQuery Code
       });
 } else { 
  // jQuery was already loaded
 // Write your jQuery Code
 }

http://99webtools.com/blog/load-jquery-if-not-already-loaded/

【讨论】：

【解决方案6】：

这是旧帖子，但我创建了一个在不同地方测试的可行解决方案。

Here is the code.

<script type="text/javascript">
    (function(url, position, callback){
        // default values
        url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
        position = position || 0;

        // Check is jQuery exists
        if (!window.jQuery) {
            // Initialize <head>
            var head = document.getElementsByTagName('head')[0];
            // Create <script> element
            var script = document.createElement("script");
            // Append URL
            script.src = url;
            // Append type
            script.type = 'text/javascript';
            // Append script to <head>
            head.appendChild(script);
            // Move script on proper position
            head.insertBefore(script,head.childNodes[position]);

            script.onload = function(){
                if(typeof callback == 'function') {
                    callback(jQuery);
                }
            };
        } else {
            if(typeof callback == 'function') {
                callback(jQuery);
            }
        }
    }('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){ 
        console.log($);
    }));
</script>

说明你可以找到HERE。

【讨论】：