Question

我有 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没有初始化，因为在我的主文档中，我声明了一些事件来测试它。我还尝试在支票下面编写一些jQuery代码，Firebug说“jQuery未定义”。这是一种方法吗？ Firebug在head标签中显示jquery包含标签！

另外，我可以动态地将代码添加到$（document）.ready（）事件中吗？或者只是将一些Click事件添加到几个元素中？

Answer 1

当您异步加载jQuery时（通过将其附加到<head>），jQuery不会立即可用。您必须向脚本（jqTag）添加一个onload侦听器，以检测它何时加载，然后运行您的代码。

e.g。

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();
}

Answer 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

Answer 3

重构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
})

或者，如果您使用异步功能，则可以使用await代替，

if(!window.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";
    await script.onload
}
// your jQuery code here

Answer 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');
     }
   }
 }

Answer 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/

Answer 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。

的说明

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

6 个答案: