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

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

Источник

6 ответов

Решение

JQuery не доступен сразу, поскольку вы загружаете его асинхронно (добавив его в <head>). Вы должны добавить прослушиватель onload к скрипту (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();
}
Источник

Чтобы включить 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
Источник

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

Если вы находитесь в асинхронной функции, вы можете использовать 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
Источник

Загрузчик 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');
     }
   }
 }
Источник

Этот код сайта решил мою проблему.

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/

Источник

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

Вот код

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

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

Источник
Другие вопросы по тегам