Charger des fichiers JavaScript dynamiquement

La fonction loadScript() permet de charger des scripts dans une page web et d'optimiser le chargement de la page.

Elle créée une balise script avec une URL et des attributs spécifiés en arguments et insère le script dans le document lorsqu'il est prêt. Une fois l'insertion effectuée, elle peut exécuter une fonction de rappel.

Fonction

loadScript()

Créée une balise script et l'insère dans le document.

Syntaxe

loadScript(url, options);

Paramètres

url(String)

Le paramètre url de la fonction loadScript() définit le chemin du fichier JavaScript à insérer dans la page.

options(Object)

Le paramètre options de la fonction loadScript() définit l'insertion de la balise script.

Propriétés

parentTag(String)

La propriété parentTag du paramètre options définit le sélecteur de balise du document HTML dans laquelle insérer le script.

attributes(Object)

La propriété attributes du paramètre options définit les attributs à appliquer à la balise script avant son insertion.

callback(Object)

La propriété callback du paramètre options définit une fonction de rappel à exécuter après l'insertion du script dans la page.

var url = 'https://code.jquery.com/jquery-3.3.1.min.js';

var options = {
  parentTag: document.body,
  attributes: {
    integrity: 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=',
    crossorigin: 'anonymous'
  },
  callback: function() {
    alert('jQuery téléchargé');
  }
};

loadScript(url, options);

(function(d){"use strict";window.loadScript=function(u,o){o=o||{};
var e=!1,a=o.attributes||{},s=d.createElement("script"),
t=o.parentTag||d.getElementsByTagName('head')[0];
s.src=u;var q=d.querySelector('script[nonce]');
if(q){s.setAttribute('nonce',q.nonce);}if(Object.keys(a).length>0){
for(var k in a){s.setAttribute(k,a[k]);}}if(typeof o.callback==='function'){
s.onload=s.onreadystatechange=function(){
if(!e&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){
e=!0;o.callback();s.onload=s.onreadystatechange=null;}};}
t.appendChild(s);}})(document);