es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo leer una variable que está fuera de un elemento de script agregado dinámicamente?

Agrego scripts dinámicamente a mi página usando el siguiente código:

var newScriptElem = document.createElement("script");
newScriptElem.innerHTML = myJSCodeString; // myJSCodeString cargado previamente desde un archivo .js separado.
parentElement.appendChild(newScriptElem);

El código adentro se ejecuta y funciona correctamente en su mayoría, pero no puedo obtener ninguna variable fuera de ese bloque. Tengo un objeto singleton cargado previamente al que agregué manualmente usando la etiqueta <script src="app.js"></script>. Tiene una variable global que quiero leer.

Funciona bien si agrego el código en la etiqueta de script directamente dentro del archivo HTML, pero no funciona si intento obtenerlo desde un script cargado dinámicamente.

Esto es cómo se ve app.js, básicamente:

var app = new App();
function App(){
  this.someVar = 2;
}

Esto funciona:

<body>
  <script src="js/app.js"></script>
   <script>
     console.log(app); // Devuelve el objeto App
   </script>
</body>

Pero esto no:

var newScriptElem = document.createElement("script");
newScriptElem.innerHTML = "console.log(app)"; // Devuelve "undefined"
parentElement.appendChild(newScriptElem);

¿Existe alguna forma de leer variables globales desde el ámbito de un elemento de script agregado dinámicamente?

PD: Por cierto, intenté usar Cordova, pero de todas formas no funciona en el navegador Chrome.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    El problema aquí es que cuando agregas el elemento de script de forma dinámica, el código dentro de él se ejecuta en un ámbito diferente al resto de tu código. Por lo tanto, no puede acceder a las variables globales definidas en tu archivo app.js.

    Para solucionar esto, puedes utilizar el objeto window para definir explícitamente tu variable global, de esta manera:

    var newScriptElem = document.createElement("script");
    newScriptElem.innerHTML = "window.appVar = app;";
    parentElement.appendChild(newScriptElem);
    

    De esta manera, estás adjuntando el objeto app al objeto window, haciendo que esté globalmente accesible en todos los ámbitos.

    Luego, para acceder al objeto app desde tu script cargado dinámicamente, simplemente puedes referenciarlo utilizando el objeto window:

    console.log(window.appVar);
    

    Esto debería mostrar el objeto app en la consola, al igual que en tu primer ejemplo.

Comments are closed.