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.

Potrebbero interessarti anche...