Caricare file JavaScript dinamicamente
Dopo un lungo periodo di assenza, rieccomi!
Potrebbe capitare, durante lo sviluppo delle nostre applicazioni web, e non solo, di dover caricare in maniera asincrona e dinamica dei file JavaScript all’interno del documento.
In giro sicuramente si troveranno svariate soluzioni al problema, ad esempio la libreria require.js, ma per quel che serviva a me, era inutile sfruttarla ed ho pensato di creare la mia funzioncina.
La funzione
function CaricaScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; //se IE if (script.readyState){ script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Altri script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
Basterà quindi richiamarla con la seguente sintassi:
CaricaScript('/js/miofile.js', function(){ //script da eseguire non appena lo script è stato caricato });
Variante
Ad essere sincero nella mia applicazione io ho usato questa forma:
function CaricaScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; script.onload = function(){ callback(true); }; script.onerror = function(){ callback(false); }; script.src = url; document.head.appendChild(script); }
Non tengo conto di Internet Explorer, perché a me non interessa, e faccio eseguire comunque la funzione di callback, passandogli però un booleano per capire se il file è stato caricato o ci sono stati errori.
Il nuovo modo di sfruttare la funzione sarà quindi:
CaricaScript('/js/miofile.js', function(esito){ if(esito){ //script da eseguire se lo script è stato caricato }else{ //script da eseguire se lo script non è stato caricato } });
Spero possa tornarti utile… e se vuoi approfondire l’argomento clicca qui.
Commentati Recentemente