Cargar JS dinámicamente dentro de JS

Solución:

Supongo que en su solución de solo DOM hizo algo como:

var script = document.createElement('script');
script.src = something;
//do stuff with the script

En primer lugar, eso no funcionará porque el script no se agrega al árbol del documento, por lo que no se cargará. Además, incluso cuando lo haga, la ejecución de javascript continúa mientras se carga el otro script, por lo que su contenido no estará disponible hasta que ese script esté completamente cargado.

Puedes escuchar el guion load evento y haga las cosas con los resultados como lo haría. Entonces:

var script = document.createElement('script');
script.onload = function () {
    //do stuff with the script
};
script.src = something;

document.head.appendChild(script); //or something of the likes

jQuery’s $.getScript() a veces tiene errores, así que uso mi propia implementación como:

jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });
}

y utilícelo como:

if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
    //Stuff to do after someScript has loaded
});

Necesito hacer esto con frecuencia, así que uso esto:

var loadJS = function(url, implementationCode, location){
    //url is URL of external file, implementationCode is the code
    //to be called from the file, location is the location to 
    //insert the <script> element

    var scriptTag = document.createElement('script');
    scriptTag.src = url;

    scriptTag.onload = implementationCode;
    scriptTag.onreadystatechange = implementationCode;

    location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
//your code goes here
}
loadJS('yourcode.js', yourCodeToBeCalled, document.body);

Para obtener más información, consulte este sitio ¿Cómo incluyo un archivo JavaScript en otro archivo JavaScript ?, que es la fuente de mi idea de función.

---

---

Utiliza Nuestro Buscador