Chargez jQuery avec Javascript et utilisez jQuery

Il y a un JSFiddle qui travaille avec un petit exemple ici, qui démontre exactement ce que vous recherchez (sauf si j'ai mal compris votre demande) : http://jsfiddle.net/9N7Z2/188/

Il y a quelques problèmes avec cette méthode de chargement de javascript dynamiquement. En ce qui concerne les cadres basaux, comme jQuery, vous voulez probablement les charger de manière statique, car sinon, vous devriez écrire un cadre de chargement de JavaScript entier …

Vous pouvez utiliser certains des chargeurs de JavaScript existants, ou écrivez-vous en regardant pour que window.jQuery soit défini.

 // Anonymous "self-invoking" function (function() { // Load the script var script = document.createElement("SCRIPT"); script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; script.type = 'text/javascript'; script.onload = function() { var $ = window.jQuery; // Use $ here... }; document.getElementsByTagName("head")[0].appendChild(script); })(); 

Rappelez-vous simplement que si vous devez supporter des navigateurs vraiment anciens, comme IE8, load gestionnaires d'événements de load ne s'exécutent pas. Dans ce cas, vous devriez rechercher l'existence de window.jQuery aide de la window.jQuery window.setTimeout répétée. Il existe une JSFiddle en cours avec cette méthode ici: http://jsfiddle.net/9N7Z2/3/

Il y a beaucoup de gens qui ont déjà fait ce que vous devez faire. Découvrez certains des frameworks existants de JavaScript Loader, comme:

• https://developers.google.com/loader/
• http://yepnopejs.com/ (obsolète)
• http://requirejs.org/

Il existe une autre façon de charger jQuery dynamiquement ( source ). Vous pourriez également utiliser

 document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>'); 

Il est considéré comme une mauvaise pratique d'utiliser document.write , mais à des fins d'achèvement, il est bon de le mentionner.

Voir Pourquoi document.write est-il considéré comme une "mauvaise pratique"? Pour les raisons. Le pro est que document.write bloque votre page de charger d'autres offres, donc il n'est pas nécessaire de créer une fonction de rappel.

Le site Web d'Encosia recommande:

 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // You may specify partial version numbers, such as "1" or "1.3", // with the same result. Doing so will automatically load the // latest version matching that partial revision pattern // (eg 1.3 would load 1.3.2 today and 1 would load 1.7.2). google.load("jquery", "1.7.2"); google.setOnLoadCallback(function() { // Place init code here instead of $(document).ready() }); </script> 

Mais même il admet qu'il ne se compare même pas à ce qui suit lorsqu'il s'agit de performances optimales:

  <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script> <script type="text/javascript" src="scripts.js"></scripts> </body> </html> 

Vous devez exécuter votre code APRÈS jQuery terminé le chargement

 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 = function(){ // your jQuery code here } 

Si vous voulez vérifier d'abord si jQuery existe déjà sur la page, essayez ceci

La raison pour laquelle vous obtenez cette erreur est que JavaScript n'attend pas le script à charger, alors lorsque vous exécutez

 jQuery(document).ready(function(){... 

Il n'est pas garanti que le script est prêt (et ne le sera jamais).

Ce n'est pas la solution la plus élégante, mais c'est praticable. Essentiellement, vous pouvez vérifier toutes les 1 seconde pour l'annonce objet jQuery exécuter une fonction lorsqu'elle est chargée avec votre code. J'ajouterais un timeout (disons clearTimeout après avoir été exécuté 20 fois) pour empêcher que le contrôle ne se produise indéfiniment.

 var jQueryIsReady = function(){ //Your JQuery code here } var checkJquery = function(){ if(typeof jQuery === "undefined"){ return false; }else{ clearTimeout(interval); jQueryIsReady(); } } var interval = setInterval(checkJquery,1000); 

En utilisant require.js, vous pouvez faire la même chose de manière sûre. Vous pouvez simplement définir votre dépendance sur jquery, puis exécuter le code souhaité à l'aide de la dépendance lorsqu'il est chargé sans polluer l'espace de noms:

Je recommande généralement cette bibliothèque pour la gestion de toutes les dépendances sur Javascript. C'est simple et permet une optimisation efficace du chargement des ressources. Cependant, il existe certaines précautions que vous devrez prendre lorsque vous l'utilisez avec JQuery. Ma façon préférée de traiter avec eux est expliquée dans ce compte Github et reflète l'exemple de code suivant:

 <title>jQuery+RequireJS Sample Page</title> <script src="scripts/require.js"></script> <script> require({ baseUrl: 'scripts', paths: { jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min' }, priority: ['jquery'] }, ['main']); </script> 

HTML:

 <html> <head> </head> <body> <div id='status'>jQuery is not loaded yet.</div> <input type='button' value='Click here to load it.' onclick='load()' /> </body> </html> 

Scénario:

  <script> load = function() { load.getScript("jquery-1.7.2.js"); load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it. } // dynamically load any javascript file. load.getScript = function(filename) { var script = document.createElement('script') script.setAttribute("type","text/javascript") script.setAttribute("src", filename) if (typeof script!="undefined") document.getElementsByTagName("head")[0].appendChild(script) } </script>