Moyens d'ajouter dynamiquement des fichiers javascript dans une page

Consultez cet article net.tutsplus.com , qui couvre de nombreuses solutions déjà réalisées.

Pour charger un fichier .js ou .css de manière dynamique, en un mot, cela implique d'utiliser des méthodes DOM pour créer d'abord un nouvel élément "SCRIPT" ou "LINK", lui attribuer les attributs appropriés et, enfin, utiliser element.appendChild () Pour ajouter l'élément à l'emplacement désiré dans l'arborescence des documents. Cela semble beaucoup plus chic que vraiment. Voyons comment tout se rassemble:

 function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file 

J'espère que son utilisation sera complète

Vous pouvez utiliser la fonction jQuery.getScript() … Je pense qu'il vous sera beaucoup plus facile d'inclure un fichier JavaScript .js .

Voici la référence.

Il existe de nombreuses façons différentes, mais la façon dont Google charge des scripts supplémentaires est comme ceci:

 function getScript(src) { document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); } 

Ceci est pris directement à partir de Google Maps Loader.

L'écriture d'une étiquette de script directement sur le document est la manière la plus simple et la plus efficace.

Pour ajouter un nouveau fichier javascript dynamiquement:

 function includeJS(jsFile) { $('head').append($('<script>').attr('type', 'text/javascript').attr('src', jsFile)); } // Pick a JS to load if ($.browser.msie) { includeJS('first.js'); } else { includeJS('second.js'); } includeJS('third.js'); 

J'ai vu ce que fait le chargeur scriptaculous. Ce qu'il fait, c'est qu'il passe par toutes les étiquettes de script dans le document pour trouver celui qui s'est chargé, par exemple:

 <script src="/path/to/single.js?files=first.js,second.js,third.js"></script> 

Ensuite, il analyse la requête utilisée dans l'attribut src et crée dynamiquement des balises de script supplémentaires pour chaque fichier de script. Dans le même temps, il analyse le chemin du script de base ( /path/to/single.js ) et utilise le même chemin pour charger les fichiers de dépendance (par exemple, /path/to/first.js ).

Vous pouvez créer votre propre chargeur de script comme celui-ci. Dans vanilla javascript, vous pouvez utiliser les fonctions suivantes:

• getElementsByTagName – trouvez tous les scripts
• getAttribute – trouver l'attribut src / href / type
• createElement – créez un élément de script
• appendChild – ajouter à la tête / corps

Anand Thangappan a posté une solution qui utilise ces fonctions. Si vous utilisez un cadre tel que jQuery ou MooTools, les deux fournissent leurs propres implémentations de chargement dynamique de JsvaScript.

Enfin, il existe une solution côté serveur pour votre problème. Regardez minify – Combine et minifie plusieurs fichiers CSS ou JavaScript en un seul téléchargement.

Nous pouvons rapidement étendre cela afin qu'un rappel puisse être effectué une fois le script ajouté.

 function loadjscssfile(filename, filetype, callback){ if (typeof fileref!="undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); callback(); } } 

Suite aux conseils des commentaires de Salaman A , j'ai trouvé comment Google le fait maintenant avec Analytics: https://developers.google.com/analytics/devguides/collection/gajs/asyncTracking

Et voici une version plus générique du même code:

 (function() { var s = document.createElement('script'); // Create a script element s.type = "text/javascript"; // optional in html5 s.async = true; // asynchronous? true/false s.src = "//example.com/your_script.js"; var fs = document.getElementsByTagName('script')[0]; // Get the first script fs.parentNode.insertBefore(s, fs); })(); 

document.getElementsByTagName("head")[0].appendChild(fileref‌​) ne fonctionne pas si vous avez document.ready () fonctionne en ligne. $("head").append(fileref); jquery.min.js bien pour moi, bien qu'il ait besoin de la référence en ligne jquery.min.js .

 <head> <!-- Meta, title, CSS, favicons, etc. --> <script src="script/jquery.min.js"></script> <script src="script/master_load.js"></script> <script> load_master_css(); load_master_js(); </script> </head> 

Et master_load.js :

 function loadjscssfile(filename) { if (filename.substr(filename.length - 4) == ".css") { // 'endsWith' is not IE supported. var fileref = document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("href", filename) //fileref.setAttribute("type", "text/css") } else if (filename.substr(filename.length - 3) == ".js") { var fileref = document.createElement('script') fileref.setAttribute("src", filename) //fileref.setAttribute("type", "text/javascript") } $("head").append(fileref); } function load_master_css() { loadjscssfile("css/bootstrap.min.css"); // bunch of css files } function load_master_js() { loadjscssfile("script/bootstrap.min.js"); // bunch of js files }