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.

RSS - Articoli
Commentati Recentemente