Charger des fichiers JavaScript dynamiquement

"loadScript" est une fonction JavaScript qui permet de charger des scripts dans une page web et d'optimiser le chargement de la page.

(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);

La fonction prend en argument le chemin du fichier JavaScript à insérer dans la page.

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

loadScript(mon_url);

Le chargement de script peut être paramétré avec un objet d'options passé en second argument de la fonction :

  • "parentTag" : permet de spécifier dans quelle balise on souhaite insérer le script
  • "attributes" : permet de lister des attributs HTML à appliquer à la balise "script" insérée
  • "callback" : permet d'exécuter du code JavaScript une fois que le script a été chargé

Voici un exemple de chargement dynamique de la librairie jQuery avec ces options :

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

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


loadScript(url, options);

Cet article vous a-t-il été utile ?

Super :)
Merci d'avoir donné votre avis !

Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !

^