libro - Documento de JavaScript.write orden de ejecución de secuencias de comandos en línea

manual javascript pdf 2017

Question

Tengo el siguiente script, donde el primer y el tercer document.writeline son estáticos y el segundo se genera :

<script language="javascript" type="text/javascript">
document.write("<script language=''javascript'' type=''text/javascript'' src=''before.js''><//sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript''>alert(''during'');<//sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''after.js''><//sc" + "ript>");
</script>

Firefox y Chrome se mostrarán antes , durante y después , mientras que Internet Explorer se muestra por primera vez durante y solo luego se muestra antes y después .

Me encontré con un artículo que dice que no soy el primero en encontrarme con esto, pero eso apenas me hace sentir mejor.

¿Alguien sabe cómo puedo establecer el orden para ser determinista en todos los navegadores, o hackear IE para que funcione como todos los demás, lo hacen los navegadores sanos?

Advertencias : El fragmento de código es una reproducción muy simple. Se genera en el servidor y el segundo script es lo único que cambia. Es un guión largo y la razón por la que hay dos guiones antes y después es para que el navegador los guarde en caché y la parte dinámica del código sea lo más pequeña posible. También puede aparecer muchas veces en la misma página con diferentes códigos generados.

Answer 1

Bien ... durante ...

// During.js
during[fish]();

después...

// After.js
alert("After");
fish++

HTML

<!-- some html -->
<script language="javascript" type="text/javascript">
document.write("<script language=''javascript'' type=''text/javascript'' src=''before.js''></sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript''>during[" + fish + "] = function(){alert(''During!'' + fish);}</sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''during.js''></sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''after.js''></sc" + "ript>");
</script>
<!-- some other html -->
<script language="javascript" type="text/javascript">
document.write("<script language=''javascript'' type=''text/javascript'' src=''before.js''></sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript''>during[" + fish + "] = function(){alert(''During!'' + fish);}</sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''during.js''></sc" + "ript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''after.js''></sc" + "ript>");
</script>

Aunque me inclino a estar de acuerdo con la forma en que esto empieza a oler. En particular, ¿por qué no podría codegen el "durante" en un archivo js creado dinámicamente e insertar eso?

Tenga en cuenta que el script generado dinámicamente va dentro de la función en el segundo document.write.
Probado en FF2, IE7

Answer 2

Código para proporcionar:

<script language="javascript" type="text/javascript">
document.write("<script language=''javascript'' type=''text/javascript''>function callGeneratedContent() { alert(''during''); }</x2Fscript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''before.js''></x2Fscript>");
document.write("<script language=''javascript'' type=''text/javascript'' src=''after.js''></x2Fscript>");
</script>

En before.js:

alert("Before");
callGeneratedContent();

En after.js:

alert("After");

Primero debe poner la línea generada, de lo contrario FF se quejará porque ejecuta before.js antes de ver la definición de la función.

Answer 3

He encontrado una respuesta más a mi gusto:

<script language="javascript" type="text/javascript">
document.write("<script language=''javascript'' type=''text/javascript'' src=''before.js''><//sc" + "ript>");
document.write("<script defer language=''javascript'' type=''text/javascript''>alert(''during'');<//sc" + "ript>");
document.write("<script defer language=''javascript'' type=''text/javascript'' src=''after.js''><//sc" + "ript>");
</script>

Esto retrasará la carga de ambos durante y después hasta que la página haya terminado de cargarse.

Creo que esto es tan bueno como puedo obtener. Con suerte, alguien podrá dar una mejor respuesta.

Answer 4

Las diapositivas 25/26 de esta presentación hablan sobre las características de los diferentes métodos para insertar scripts. Sugiere que IE es el único navegador que ejecutará esos scripts en orden. Todos los demás navegadores los ejecutarán en el orden en que terminen de cargarse. Incluso IE no los ejecutará en orden si uno o más tienen js en línea en lugar de src.

Uno de los métodos sugeridos es insertar un nuevo elemento DOM:

var se1 = document.createElement(''script'');
se1.src = ''a.js'';
var se2 = document.createElement(''script'');
se2.src = ''b.js'';
var se3 = document.createElement(''script'');
se3.src = ''c.js'';
var head = document.getElementsByTagName(''head'')[0]
head.appendChild(se1);
head.appendChild(se2);
head.appendChild(se3);

Para generar la segunda sección de scripts, puede usar un script para generar ese contenido y pasar los parámetros:

se2.src = ''generateScript.php?params='' + someParam;

EDITAR: a pesar de lo que dice el artículo que situé, mi prueba sugiere que la mayoría de los navegadores ejecutarán tus guiones document.write en orden si cada uno tiene un src, así que aunque creo que el método anterior es el preferido, podrías hacer esto también. :

<script language="javascript" type="text/javascript">
document.write("<script type=''text/javascript'' src=''before.js''><//sc" + "ript>");
document.write("<script type=''text/javascript'' src=''during.php?params=" + params + "''><//sc" + "ript>");
document.write("<script type=''text/javascript'' src=''after.js''><//sc" + "ript>");
</script>

EDITAR DE NUEVO (respuesta a los comentarios a mí y a los demás): ya está generando el script en su página. Lo que sea que esté haciendo se puede mover a otra secuencia de comandos del lado del servidor que genera el mismo bloque de código. Si necesita parámetros en su página, páselos a la secuencia de comandos en la cadena de consulta.

Además, puede usar este mismo método si, como sugiere, está generando el script en línea varias veces:

<script language="javascript" type="text/javascript">
document.write("<script type=''text/javascript'' src=''before.js''><//sc" + "ript>");
document.write("<script type=''text/javascript'' src=''during.php?params=" + params1 + "''><//sc" + "ript>");
document.write("<script type=''text/javascript'' src=''during.php?params=" + params2 + "''><//sc" + "ript>");
document.write("<script type=''text/javascript'' src=''during.php?params=" + params3 + "''><//sc" + "ript>");
document.write("<script type=''text/javascript'' src=''after.js''><//sc" + "ript>");
</script>

Sin embargo, esto está empezando a parecer que te estás acercando a esto de la manera incorrecta. Si está generando un bloque grande de código varias veces, entonces probablemente debería reemplazarlo con una sola función js y llamarlo con diferentes params en su lugar ...

Answer 5

No, este es el comportamiento de Internet Explorer.

Si adjunta scripts dinámicamente, IE, Firefox y Chrome descargarán los scripts de manera asíncrona.

Firefox y Chrome esperarán hasta que todas las solicitudes asincrónicas regresen y luego ejecutarán las secuencias de comandos en el orden en que están unidas en el DOM, pero IE ejecuta las secuencias de comandos en el orden en que se devuelven por cable.

Dado que la alerta toma menos tiempo para "recuperar" que un archivo javascript externo, eso probablemente explica el comportamiento que está viendo.

De la publicación de Kristoffer Henriksson sobre el tema de la carga de scripts asincrónicos :

En este escenario, IE y Firefox descargarán ambos scripts, pero Internet Explorer también los ejecutará en el orden en que terminen la descarga, mientras que Firefox los descarga de forma asincrónica, pero los ejecuta en el orden en que están conectados en el DOM.

En Internet Explorer esto significa que sus scripts no pueden tener dependencias entre sí ya que el orden de ejecución variará dependiendo del tráfico de la red, cachés, etc.

Considere usar un cargador de Javascript. Le permitirá especificar las dependencias del script y el orden de ejecución mientras también carga los scripts de forma asíncrona para la velocidad y suaviza algunas de las diferencias del navegador.

Esta es una muy buena descripción general de algunos de ellos: JavaScript esencial: los cinco mejores cargadores de scripts .

He usado tanto RequireJS como LabJS. En mi opinión, LabJS es un poco menos obstinado.

Answer 6

Puede forzar la ejecución secuencial definiendo eventos "onload" (o similares) en los scripts e inyecte el siguiente en la función de evento. No es trivial, pero hay muchos ejemplos, aquí hay uno.

http://www.phpied.com/javascript-include-ready-onload/

Creo que las bibliotecas populares como jQuery o prototipo pueden ayudar con esto.

Answer 7

Qué hay sobre eso:

<script>
document.write("<script src=''before.js''><//script>");
</script>
<script >
document.write("<script>alert(''during'');<//script>");
</script>
<script>
document.write("<script src=''after.js''><//script>");
</script>