Funciones en archivo JavaScript añadido dinámicamente

eduardobpe · #1 (**permalink**) 22/12/2012, 09:25

Hola a todos y todas.
Me gustaría preguntarles acerca de un pequeño problema que tengo cuando añado un archivo javascript dinámicamente y quiero acceder a las funciones de éste después de haberlo cargado.

Voy a escribirlo en un ejemplo.

Tengo el siguiente archivo dinamicos.html:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Scripts dinámicos</title>
    <script type="text/javascript" src="prueba2.js"></script>
</head>
<body>
    <p>Probando los scripts dinámicos</p>
    <script type="text/javascript">
        loadScript("funciones.js");
        diHola();
    </script>
</body>
</html>

Tengo también un archivo .js llamado prueba2.js, que carga dinámicamente un elemento <script> que enlaza con un archivo .js externo:

prueba2.js

Código Javascript:

Ver originalfunction loadScript(url) {
    //url es la url del archivo javascript externo que se quiere cargar
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

Y finalmente, tengo un archivo .js llamado funciones.js en el que tengo dos funciones muy simples:

funciones.js

Código Javascript:

Ver originalfunction diAdios() {
    alert("Adiós");
}
 
function diHola() {
    alert("Hola");
};

La cuestión es que yo quiero cargar el archivo funciones.js de forma dinámica llamando a loadScript("funciones.js") desde el archivo dinamicos.html.
Esto se realiza correctamente, pero cuando quiero utilizar una función del archivo funciones.js desde el archivo dinamicos.html, llamando por ejemplo a diHola(), obtengo el siguiente error: Uncaught ReferenceError: diHola is not defined.

Observando el código fuente de dinamicos.html después de insertar el script dinámicamente se puede ver como sí se ha insertado un nuevo elemento <script> que enlaza al archivo funciones.js.
El problema es que después no puedo utilizar ninguna de las funciones de este archivo .js desde el archivo html.

Si alguien entiendo lo que quiero decir agradecería alguna solución.

emprear · #2 (**permalink**) 22/12/2012, 11:27

Tenés que invocar la función una vez que se cargó el documento

Código Javascript:

Ver originalwindow.onload = function(){
            diHola();
        }

Yo en particular, para cargar tanto js como css dinámicos (bastante común cuando cargás html que contiene javascript con ajax), utilizo esta script

Código Javascript:

Ver originalvar cargarObjetos="";
                function cargarRecursos(){
                    if(!document.getElementById){
                        return;
                        }
                        var i = 0;for(i=0; i<arguments.length; i++){
                            var archivo=arguments[i];var archivoref="";
                            if(cargarObjetos.indexOf(archivo)==-1){
                                if(archivo.indexOf(".js")!=-1){
                                    archivoref=document.createElement('script');archivoref.setAttribute("type","text/javascript");
                                    archivoref.setAttribute("src", archivo);
                                    }else if(archivo.indexOf(".css")!=-1){
                                        archivoref=document.createElement("link");
                                        archivoref.setAttribute("rel", "stylesheet");
                                        archivoref.setAttribute("type", "text/css");
                                        archivoref.setAttribute("href", archivo);
                                        }
                                        }if(archivoref!=""){
                                            document.getElementsByTagName("head").item(0).appendChild(archivoref);
                                            cargarObjetos+=archivo+" ";
                                            }
                                        }
                                    }

Cargándola en el header.
Saludos

eduardobpe · #3 (**permalink**) 22/12/2012, 12:30

Gracias por tu ayuda @emprear.
Efectivamente su solución de utilizar windows.onload funciona correctamente, y el script que escribió después también es muy útil para cargar dinámicamente varios archivos javascript y css al mismo tiempo.

El problema que le veo a utilizar window.onload es que, si por ejemplo mi archivo javascript añadido dinámicamente tiene 50 funciones, y quiero llamar a 15 desde mi documento html, tengo que hacer lo siguiente:

Código Javascript:

Ver originalwindow.onload = function() {
//llamada a función 1
//llamada a función 2
//llamada a función 3
//...
//llamada a función 15
}

Lo que me gustaría es que, una vez cargado dinámicamente el archivo con la llamada a mi función "loadScript("funciones.js");", tendría disponibles todas las funciones de este archivo sin esperar a que se produjera el evento load de la página entera, ya que eso puede tardar bastante en algunos casos.
No sé si se puede utilizar o disparar algún otro evento para tener disponible todo el código del archivo javascript cargado dinámicamente antes de que se carguen todos los elementos de la página.

Lo que he sacado como conclusión, por si a alguien más le interesa profundizar en este tema, es lo que voy a explicar siguiendo el ejemplo que puse en mi primer post:

Si en mi documento html pongo lo siguiente:

Código HTML:

Ver original<script type="text/javascript">
        loadScript("funciones.js");
        diHola();
</script>

La llamada a loadScript("funciones.js"); carga dinámicamente el archivo funciones.js y añade el siguiente código al final de <body> en el documento html:

Código HTML:

Ver original<script text="text/javascript" src="funciones.js"></script>

Aunque se haya añadido lo anterior al código fuente de la página, realmente no se han cargado las funciones que pudiera tener el archivo "funciones.js", por lo que si inmediatamente después de cargar éste, quiero hacer una llamada a algunas de sus funciones, como por ejemplo a "diHola()", obtendrá un error diciendo que diHola no existe.
Mi teoría es que, el código existente en el archivo añadido dinámicamente llamado funciones.js no ha sido cargado todavía. Es como si habría que esperar un rato a que el navegador completara este proceso.
Esto se puede comprobar si en vuestro documento html poneis lo siguiente:

Código HTML:

Ver original<script type="text/javascript">
        loadScript("prueba.js");
        setTimeout("diHola()", 1000);
</script>

En este último caso, espero 1 segundo para ejecutar la función "diHola()" que se encuentra en el archivo funciones.js que añadí dinámicamente antes.

La cuestión es que, lo que yo hubiera esperado que se pudiera hacer al añadir dinámicamente el archivo javascript "funciones.js", es utilizar todas las funciones en él contenidas inmediatamente, sin utilizar "window.onload".

eduardobpe · #4 (**permalink**) 22/12/2012, 14:26

Por si alguien le ayuda, me ha sido útil leer [URL="http://stackoverflow.com/questions/8586446/dynamically-load-external-javascript-file-and-wait-for-it-to-load-without-usi"]un post en stackoverflow.com[/URL] que habla precisamente de esto.
De todas formas voy a seguir informándome acerca de este tema para ver si descubro la mejor solución, y así ayudo a cualquiera que tenga la mismas dudas.

Trublux · #5 (**permalink**) 22/12/2012, 15:12

Cuando se hace lo que estás haciendo el propósito es que la página no tenga que retrasarse en cargar por cargar el js. Pero si quieres que esté todo disponible desde el principio, no lo hagas así, carga todo tal cual y ya está.