web-dev-qa-db-fra.com

Comment puis-je charger jQuery s'il n'est pas déjà chargé?

J'ai un initializor.js qui contient les éléments suivants:

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

Je suis ensuite inclure ce fichier quelque part sur une autre page. Le code vérifie si jQuery est chargé et, le cas échéant, ajoutez-le à la balise Head.

Cependant, jQuery n'est pas en cours d'initialisation, car dans mon document principal, quelques événements ont été déclarés uniquement pour tester cela. J'ai aussi essayé d'écrire du code jQuery sous le chèque, et Firebug a déclaré "jQuery n'est pas défini". Est-ce que c'est une façon de faire ça? Firebug montre la balise d'inclusion jquery dans la balise head!

De plus, puis-je ajouter de manière dynamique du code dans l'événement $ (document) .ready ()? Ou ne faudrait-il pas simplement ajouter des événements Click à quelques éléments?

javascriptjquerydynamic
35
Jeff

jQuery n'est pas disponible immédiatement car vous le chargez de manière asynchrone (en l'ajoutant au <head>). Vous devez ajouter un écouteur onload au script (jqTag) pour détecter son chargement, puis exécuter votre code.

par exemple.

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

Pour inclure jQuery, vous devriez utiliser ceci:

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

il utilise le Google CDN mais fournit une solution de repli et une URL relative au protocole. 

Note: Assurez-vous de changer le numéro de version à la dernière version.

si window.jQuery est défini, il ne continuera pas à lire la ligne puisqu'il s'agit d'un ou qui contient déjà une valeur vraie, sinon il (document.) écrit la valeur
voir: theHTML5Boilerplate

aussi: vous avez oublié les guillemets, si jQuery n'est pas défini:

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

vous pouvez aussi:

window.jQuery === undefined //true
28
beardhatcode

Refactoring Réponse d'Adam Heath (Ceci est plus lisible, OMI). En bout de ligne, vous devez exécuter le code jQuery APRES le chargement de 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;
}

Si vous utilisez une fonction asynchrone, vous pouvez utiliser plutôt await, comme ceci 

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

Le chargeur YepNope peut être utilisé pour charger des scripts de manière conditionnelle, a une syntaxe assez agréable, facile à lire, ils en ont un exemple sur leur site web.

Vous pouvez l'obtenir sur leur site web .

Exemple tiré de leur site web:

 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');
     }
   }
 }
2
Steve Elliott

Ceci est vieux post mais je crée une solution réalisable testée sur divers endroits.

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

Explication vous pouvez trouver ICI .

0
Ivijan Stefan Stipić

Ce code de site est résolu mon problème.

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/

0
Fatih Hayrioğlu