Как загрузить jQuery, если он еще не загружен?

У меня есть 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 - undefined". Есть ли способ сделать это? Firebug показывает тег включения jquery в теге заголовка!

Кроме того, могу ли я динамически добавлять код в событие $(document).ready()? Или не нужно было просто добавлять некоторые события Click к нескольким элементам?

Ответ 1

jQuery недоступен сразу же, когда вы загружаете его асинхронно (добавив его в <head>). Вам нужно будет добавить прослушиватель onload к script (jqTag), чтобы определить, когда он загружается, а затем запускать ваш код.

например.

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

Ответ 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 определен, он не будет продолжать читать строку, поскольку он является или уже содержит истинное значение, если нет, то он (document.) запишет значение
см.: theHTML5Boilerplate

также: вы забыли кавычки, если jQuery не определен:

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

Вы также можете:

window.jQuery === undefined //true

Ответ 3

Рефакторинг ответа Адама Хита (это более читабельно ИМО). В итоге, вам нужно запустить код 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

Ответ 4

Загрузочный загрузчик YepNope может использоваться для условной загрузки скриптов, имеет неплохой, легко читаемый синтаксис, у него есть пример именно этого на своем веб-сайте.

Вы можете получить его от своего веб-сайта.

Пример, взятый со своего веб-сайта:

 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

Это старый пост, но я создаю одно работоспособное решение, протестированное в разных местах.

Вот код

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

Объяснение вы можете найти ЗДЕСЬ.