javascript - ejemplos - Importación dinámica de JavasScript

html dinamico javascript

Question

¿Cuál es la forma correcta de importar dinámicamente archivos JavaScript (.js) en un código JavaScript padre, por favor?

Estoy usando el siguiente código, pero parece no ser correcto:

    function loadjscssfile(filename, filetype)
{
    //if filename is a external JavaScript file
    if (filetype=="js")
    {
        var fileref=document.createElement(''script'');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    //if filename is an external CSS file
    else if (filetype=="css")
    {
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Creo que el código no es correcto porque, en el código maestro de JavaScript, no puedo leer las variables definidas en el código importado, como por ejemplo:

var fileRef = loadjscssfile(''Language/svk.js'', ''js'');
alert("Pet Name: " + PETNAME);

el archivo import svk.js contiene el único código:

// JavaScript Document
var PETNAME = "Beauty";

Gracias.

Answer 1

En svk.js agregue lo siguiente (después de la deceleración variable):

svkLoaded();

En el archivo de código maestro, agregue lo siguiente:

function svkLoaded()
{
    alert("Pet Name: " + PETNAME);
}

Answer 2

La razón por la que no se puede leer la variable PETNAME es que la inyección dinámica de scripts como esta es asincrónica y no bloqueante. Esto significa que su alert ejecuta antes de que el script realmente se haya cargado. En cambio, es posible que PETNAME sondear la existencia de la variable PETNAME :

var waitForPETNAME = function(){
        if (typeof PETNAME === ''undefined'') {
            setTimeout(waitForPETNAME, 15);
        } else {
            // execute code that uses PETNAME
        }
    };

waitForPETNAME();

Además, una forma más infalible para inyectar elementos dinámicamente es insertarlos antes del primer elemento de script, ya que usted sabe con certeza que un elemento de script debe existir (de lo contrario, no estaría ejecutando código). En otras palabras, reemplace:

document.getElementsByTagName("head")[0].appendChild(fileref)

con:

var insref = document.getElementsByTagName(''script'')[0];
insref.parentNode.insertBefore(fileref, insref);

Answer 3

No puede usar variables y funciones definidas en el archivo JS externo inmediatamente después de insertar la etiqueta <script> . El navegador tarda unos milisegundos en cargar el archivo y ejecutarlo.

Tendría que trabajar con algún tipo de devolución de llamada para tener el orden de carga correcto para su JavaScript.

Para una carga condicional adecuada de JavaScript, eche un vistazo a Require.js . Allí se implementa el patrón de Definición de Módulo Asíncrono.