Inclure dynamiquement jQuery en utilisant JavaScript s'il n'est pas déjà présent

Question

Je suis en train d'écrire un petit outil JavaScript que j'ai l'intention de mettre à la disposition d'autres personnes et qui utilise jQuery. Mon rêve pour ce petit utilitaire est que les gens puissent inclure un seul fichier .js à partir d'une source distante et, quand ce fichier est chargé, le faire vérifier pour voir si jQuery a déjà été inclus et, si c'est le cas, s'assurer qu'il est une version assez récente pour être compatible avec ce que mon code doit faire. Certains pseudo-code qui peut expliquer ma question plus clairement (ce code apparaît en haut du fichier .js unique je l'ai mentionné plus tôt):

if jQuery is loaded { 
    if version is less than (say) 1.3 { 
     // load latest version of jQuery 
    } 
} else { 
    // load latest version of jQuery 
} 

// and do the jQuery.noConflict() 
// dance to avoid trampling any other libraries, etc. that the 
// user may be utilizing. 

// The rest of my code lives here, happy in the knowledge that it's running in 
// isolation from the rest of the JS that the page knows about. 

Ma question, distillée en trois parties amicales:

1. Est est-il possible de charger deux versions séparées de jQuery sans qu'elles se craquent les unes sur les autres? Puis-je arrêter l'exécution de mon code JS pendant le chargement de jQuery, puis continuer?
2. Est-il possible d'utiliser noConflict() tel que je le décris? Ou devrais-je juste appeler tout en utilisant jQuery() et ne pas s'en préoccuper?

L'idée globale est ici que tout ancien utilisateur peut saisir un petit extrait de HTML et déposez-le sur leur site/blog/tout pour que cela fonctionne juste ™. Et puisque de nombreuses plates-formes de publication modernes sont maintenant livrées avec jQuery, je ne peux pas simplement supposer qu'il ne fonctionne pas et l'inclure.

Merci de votre temps, et s'il vous plaît laissez-moi savoir si une partie de ce n'est pas clair ou si je peux fournir un contexte/détail supplémentaire pour rendre votre réponse plus facile.

Answer 1

function doMyStuff(jQueryJustForThisFn) { 
    // do jQuery stuff! 
    jQueryJustForThisFn('div').addClass('wow'); 
} 

function check() { 
    return window.jQuery && jQuery.fn && /^1\.[3-9]/.test(jQuery.fn.jquery); 
} 

if (check()) { 

    doMyStuff(jQuery); 

} else { 

    var script = document.createElement('script'), 

     timer = setInterval(function(){ 
      if (check()) { 
       clearInterval(timer); 
       document.body.removeChild(script); 
       doMyStuff(jQuery.noConflict(true)); 
      } 
     }, 30); 

    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'; 

    document.body.insertBefore(script, document.body.firstChild); 

} 

Answer 2

Je ne sais pas grand-chose au sujet de la noConflict, donc je ne peux répondre à la plupart 2.

Ceci est habituellement appelé chargement paresseux. Voir my answer sur une question similaire à faire

Answer 3

Je ne l'ai pas essayé de voir comment il se comporte avec une version inférieure déjà chargé, mais vous pouvez consulter google.load

http://code.google.com/apis/ajaxlibs/documentation/#googleDotLoad

Answer 4

Pour une sécurité absolue, vous pouvez envisager d'utiliser la version de jQuery que vous utilisez. C'est un peu moche, mais une regex contre la base de code pour définir votre propre point de rattachement global vous assurera de ne rien casser. Si le code est largement déployé sur divers sites, ce sera votre meilleure option et la plupart garantira la compatibilité future.

Answer 5

(function(){ 

    var myBkl = { 
      jq: null, 
      loadScript: function(src) { 
        if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){ 
          return; 
        } 
        var s = document.createElement('script'); 
        s.setAttribute('src', src); 
        s.setAttribute('type', 'text/javascript'); 
        document.getElementsByTagName('head')[0].appendChild(s); 
      }, 
      whenLoaded: function(callback){ 
        if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') { 
          myBkl.jq = window.jQuery.noConflict(true); 
          callback(myBkl.jq); 
        } 
        else { 
          setTimeout((function() {myBkl.whenLoaded(callback); }),  
100); 
        } 
      }, 
      init: function($){ 
        console.log($.fn.jquery); 
        console.log(window.jQuery.fn.jquery); 
      } 
    }; 
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'); 
    myBkl.whenLoaded(myBkl.init); 
})(); 

Answer 6

Cette question a été répondue here

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

if(window.jQuery) jQueryCode(); 
else{ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"; 
    document.head.appendChild(script); 

    script.onload = jQueryCode; 
}