javascript - ubicar - ¿Por qué dividir la etiqueta<script> al escribirla con document.write()?

script type= text/javascript para que sirve

Question

¿Por qué algunos sitios (o anunciantes que dan a los clientes el código javascript) emplean una técnica para dividir las etiquetas <script> y / o </script> dentro de las llamadas document.write() ?

Noté que Amazon también hace esto, por ejemplo:

<script type=''text/javascript''>
  if (typeof window[''jQuery''] == ''undefined'') document.write(''<scr''+''ipt type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></sc''+''ript>'');
</script>

Answer 1

Aquí hay otra variación que he usado cuando deseo generar una etiqueta de script en línea (por lo que se ejecuta de inmediato) sin necesidad de ningún tipo de escapes:

<script>
    var script = document.createElement(''script'');
    script.src = ''/path/to/script.js'';
    document.write(script.outerHTML);
</script>

(Nota: al contrario de la mayoría de los ejemplos en la red, no estoy configurando type="text/javascript" ni en la etiqueta que lo encierra, ni en la generada: no hay un navegador que no tenga eso como predeterminado, por lo que es redundante , pero tampoco te dolerá, si no estás de acuerdo).

Answer 2

Creo que es para evitar que el analizador HTML del navegador interprete <script>, y principalmente el </script> como la etiqueta de cierre del script real, sin embargo, no creo que usar document.write sea una excelente idea para evaluar el script bloques, ¿por qué no usar el DOM ...

var newScript = document.createElement("script");
...

Answer 3

El analizador HTML interpreta el código </script> dentro de la cadena de Javascript como una etiqueta de cierre, lo que provoca un comportamiento inesperado ( vea el ejemplo en JSFiddle ).

Para evitar esto, puede colocar su javascript entre comentarios (este estilo de codificación era una práctica común, ya que Javascript era poco compatible entre los navegadores). Esto funcionaría ( ver ejemplo en JSFiddle ):

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        document.write(''<script type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></script>'');
    }
    // -->
</script>

... pero para ser honesto, usar document.write no es algo que yo consideraría la mejor práctica. ¿Por qué no manipular el DOM directamente?

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        var script = document.createElement(''script'');
        script.setAttribute(''type'', ''text/javascript'');
        script.setAttribute(''src'', ''http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js'');
        document.body.appendChild(script);
    }
    // -->
</script>

Answer 4

La solución que Bobince publicó funciona perfectamente para mí. Quería ofrecer un método alternativo también para futuros visitantes:

if (typeof(jQuery) == ''undefined'') {
    (function() {
        var sct = document.createElement(''script'');
        sct.src = (''https:'' == document.location.protocol ? ''https'' : ''http'') +
          ''://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'';
        sct.type = ''text/javascript'';
        sct.async = ''true'';
        var domel = document.getElementsByTagName(''script'')[0];
        domel.parentNode.insertBefore(sct, domel);
    })();
}

En este ejemplo, he incluido una carga condicional para jQuery para demostrar el caso de uso. Espero que sea útil para alguien!

Answer 5

</script> se debe dividir porque, de lo contrario, terminaría el bloque <script></script> encierra demasiado pronto. Realmente debería dividirse entre < y / , porque se supone que un bloque de script (de acuerdo con SGML) debe terminar con cualquier secuencia abierta de etiqueta final (ETAGO) (es decir, </ ) :

Aunque los elementos STYLE y SCRIPT usan CDATA para su modelo de datos, para estos elementos, los agentes de usuario deben manejar CDATA de manera diferente. El marcado y las entidades se deben tratar como texto sin procesar y se deben pasar a la aplicación tal como están. La primera aparición de la secuencia de caracteres " </ " (delimitador abierto de etiqueta final) se trata como la terminación del final del contenido del elemento. En documentos válidos, esta sería la etiqueta final para el elemento.

Sin embargo, en la práctica, los navegadores solo terminan de analizar un bloque de script CDATA en una etiqueta de cierre real </script> .

En XHTML no existe un manejo especial para los bloques de script, por lo que cualquier carácter < (o & ) dentro de ellos debe ser &escaped; Como en cualquier otro elemento. Sin embargo, los navegadores que analizan XHTML como HTML de la vieja escuela se confundirán. Existen soluciones que involucran bloques CDATA, pero es más fácil simplemente evitar el uso de estos caracteres sin escaparse. Una mejor manera de escribir un elemento de secuencia de comandos que funcione en cualquier tipo de analizador sería:

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