web-dev-qa-db-fra.com

Façons d'ajouter dynamiquement des fichiers javascript dans une page

J'ai vu le fichier Scriptaculous.js inclure dynamiquement ses fichiers javascript requis. Existe-t-il une meilleure approche pour inclure dynamiquement javascript?.

Par exemple, je voudrais inclure mes fichiers js comme,

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

Comment puis-je le faire de manière efficace?

javascriptjqueryprototypejsscriptaculous
33
Hoque

Pour charger un fichier .js ou .css dynamiquement, en bref, cela signifie utiliser les méthodes DOM pour créer d'abord un nouvel élément chic "SCRIPT" ou "LINK", lui affecter les attributs appropriés, et enfin, utiliser element.appendChild () pour ajouter l'élément à l'emplacement souhaité dans l'arborescence du document. Cela semble beaucoup plus sophistiqué qu'il ne l'est vraiment. Voyons comment tout cela se réunit:

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 est complète

41
Anand Thangappan

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

Ici est la référence.

13
Vivek

il existe de nombreuses façons différentes, mais la façon dont Google charge les scripts supplémentaires est la suivante:

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

Ceci est tiré directement du chargeur de Google Maps.

L'écriture d'une balise de script directement dans le document est le moyen le plus simple et le plus efficace.

4
herostwist

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);
})();
2
Luke

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');
1
Justin808

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

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

Il analyse ensuite la chaîne de requête utilisée dans l'attribut src et crée dynamiquement des balises de script supplémentaires pour chaque fichier de script. En même temps, il analyse également 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. En javascript Vanilla, vous pouvez utiliser les fonctions suivantes:

Anand Thangappan a publié une solution qui utilise ces fonctions. Si vous utilisez un framework 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.

1
Salman A

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();
    }
}
0
Dennis Bartlett

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

<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
}
0
AmirHossein Manian