document.createElement ("script") sincrónicamente

Question

¿Es posible invocar un archivo .js sincrónicamente y luego utilizarlo inmediatamente después?

<script type="text/javascript"> 
    var head = document.getElementsByTagName('head').item(0); 
    var script = document.createElement('script'); 
    script.setAttribute('type', 'text/javascript'); 
    script.setAttribute('src', 'http://mysite/my.js'); 
    head.appendChild(script); 

    myFunction(); // Fails because it hasn't loaded from my.js yet. 

    window.onload = function() { 
     // Works most of the time but not all of the time. 
     // Especially if my.js injects another script that contains myFunction(). 
     myFunction(); 
    }; 
</script> 

Esto se simplifica. En mi implementación, las cosas de createElement están en una función. Pensé en agregar algo a la función que pudiera verificar si una determinada variable se instanciaba antes de devolver el control. Pero aún existe el problema de qué hacer al incluir js de otro sitio sobre el que no tengo control.

¿Pensamientos?

Editar:

He aceptado la mejor respuesta por el momento, ya que da una buena explicación de lo que está pasando. Pero si alguien tiene alguna sugerencia sobre cómo mejorar esto, estoy abierto a ellos. Aquí hay un ejemplo de lo que me gustaría hacer.

// Include() is a custom function to import js. 
Include('my1.js'); 
Include('my2.js'); 

myFunc1('blarg'); 
myFunc2('bleet'); 

sólo quiero evitar tener que conocer el funcionamiento interno demasiado y acaba de ser capaz de decir: "Me gustaría utilizar este módulo, y ahora voy a utilizar un código de él."

Answer 1

Usted puede crear su elemento <script> con una "onload" manipulador, y que se llamará cuando el guión se ha cargado y evaluado por el navegador .

var script = document.createElement('script'); 
script.onload = function() { 
    alert("Script loaded and ready"); 
}; 
script.src = "http://whatever.com/the/script.js"; 
document.getElementsByTagName('head')[0].appendChild(script); 

No puede hacerlo sincrónicamente.

edición — se ha señalado que, como era de esperar, IE no se dispara un evento de "carga" en la <script> etiquetas se cargan/evaluados. Por lo tanto, supongo que lo siguiente que debe hacer es buscar el script con XMLHttpRequest y luego eval(). (O, supongo, rellenar el texto en una etiqueta <script> agrega;. El entorno de ejecución de eval() se ve afectado por el ámbito local, por lo que no necesariamente va a hacer lo que usted quiere que haga)

edición — A partir de principios de 2013, recomendaría encarecidamente buscar en una herramienta de carga de scripts más robusta como Requirejs. Hay muchos casos especiales de los que preocuparse. Para situaciones realmente simples, hay yepnope, que ahora está integrado en Modernizr.

Answer 2

Esto parece ser una visión general decente de carga dinámica script: http://unixpapa.com/js/dyna.html

Answer 3

asíncrono programación es un poco más complicada porque la consecuencia de hacer una solicitud se encapsula en una función en lugar de seguir el estado de la solicitud. Pero el comportamiento en tiempo real que las experiencias de los usuarios pueden ser significativamente mejor porque no van a ver a un servidor de red lento o débil que el navegador a actuar como si se hubiera estrellado.La programación sincrónica es irrespetuosa y no debe emplearse en aplicaciones que son utilizadas por personas.

Douglas Crockford(YUI Blog)

bien, hebilla de sus asientos, porque va a ser un viaje lleno de baches. Cada vez más personas preguntan sobre cómo cargar scripts dinámicamente a través de javascript, parece ser un tema candente.

Las principales razones para que esto se hizo tan popular son:

• modularidad del lado del cliente
• más fácil de dependencia de gestión
• manejo de errores
• ventajas de rendimiento

Sobre modularidad : es obvio que la gestión del lado del cliente depende ncies deben manejarse en el lado del cliente. Si se necesita un determinado objeto, módulo o biblioteca, solo lo solicitamos y lo cargamos dinámicamente.

Error al manejar: si un recurso falla, todavía tenemos la posibilidad de bloquear solo las partes que dependen del guión afectado, o tal vez incluso darle otra oportunidad con algún retraso.

El rendimiento se ha convertido en una ventaja competitiva entre los sitios web, ahora es un factor de clasificación de búsqueda. Lo que las secuencias de comandos dinámicas pueden hacer es imitar el comportamiento asincrónico en comparación con la forma predeterminada de bloqueo de cómo los navegadores manejan las secuencias de comandos. Scripts bloquear otros recursos, secuencias de comandos bloque más análisis del documento HTML, secuencias de comandos bloquean la interfaz de usuario. Ahora, con las etiquetas de scripts dinámicos y sus alternativas entre navegadores, puede realizar solicitudes asincrónicas reales y ejecutar código dependiente solo cuando estén disponibles. Sus scripts se cargarán en paralelo incluso con otros recursos y la representación será perfecta.

La razón por la que algunas personas se adhieren a scripts sincrónicos es porque están acostumbrados. Ellos piensan que es la manera predeterminada, es la manera más fácil, y algunos incluso pueden pensar que es la única manera.

Pero lo único que deberíamos tener en cuenta cuando esto deba decidirse con respecto al diseño de una aplicación es la experiencia del usuario final . Y en esta área asincrónico no se puede superar. El usuario obtiene respuestas inmediatas (o decir promesas), y una promesa siempre es mejor que nada. Una pantalla en blanco asusta a las personas. Los desarrolladores no deben ser perezosos para mejorar el rendimiento percibido.

Y, finalmente, algunas palabras sobre el lado sucio.Lo que debe hacer con el fin de conseguir que funcione en todos los navegadores:

1. aprender a pensar de forma asíncrona
2. organizar el código para ser modular
3. organizar el código para controlar los errores y casos extremos, así
4. mejorar progresivamente
5. siempre cuidar de la cantidad correcta de retroalimentación

Answer 4

Esto no es bonito, pero funciona:

<script type="text/javascript"> 
    document.write('<script type="text/javascript" src="other.js"></script>'); 
</script> 

<script type="text/javascript"> 
    functionFromOther(); 
</script> 

O

<script type="text/javascript"> 
    document.write('<script type="text/javascript" src="other.js"></script>'); 
    window.onload = function() { 
    functionFromOther(); 
    }; 
</script> 

La secuencia de comandos debe estar incluido en una etiqueta separada <script> o antes window.onload().

Esto no funcionará:

<script type="text/javascript"> 
    document.write('<script type="text/javascript" src="other.js"></script>'); 
    functionFromOther(); // Error 
</script> 

El mismo se puede hacer con la creación de un nodo, como lo hizo puntiagudo, pero sólo en FF. No tiene garantía cuando la secuencia de comandos estará lista en otros navegadores.

Siendo un purista de XML Realmente odio esto. Pero funciona de manera predecible. Puedes envolver fácilmente esos feos document.write() s para que no tengas que mirarlos. Incluso podría hacer pruebas y crear un nodo y anexarlo, luego volver al document.write().

Answer 5

Irónicamente, tengo lo que quieres, pero quiero algo más parecido a lo que tienes.

Estoy cargando cosas en forma dinámica y de forma asíncrona, pero con un load devolución de llamada como tal (usando dojo y xmlhtpprequest)

dojo.xhrGet({ 
    url: 'getCode.php', 
    handleAs: "javascript", 
    content : { 
    module : 'my.js' 
    }, 
    load: function() { 
    myFunc1('blarg'); 
    }, 
    error: function(errorMessage) { 
    console.error(errorMessage); 
    } 
}); 

Para una explicación más detallada, véase here

El problema es que en alguna parte a lo largo de la línea, el código es evadido, y si hay algún problema con su código, la declaración console.error(errorMessage); indicará la línea donde está eval(), no el error real. . Esta es tal un gran problema que en realidad estoy tratando de convertir de nuevo a <script> declaraciones (ver here

Última pregunta

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Cuestiones relacionadas

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.