"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 !