Perché dividere il tag <script> quando lo si scrive con document.write ()?

Perché alcuni siti (o inserzionisti che forniscono ai clienti codice javascript) utilizzano una tecnica per suddividere il <script>e / o il </script>tag all'interno delle document.write()chiamate?

Ho notato che anche Amazon fa questo, ad esempio:

<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>

</script>deve essere rotto perché altrimenti finirebbe il <script></script>blocco di chiusura troppo presto. In realtà dovrebbe essere diviso tra il <e il /, perché si suppone che un blocco di script (secondo SGML) sia terminato da qualsiasi sequenza aperta (ETAGO) end-tag (cioè </) :

Sebbene gli elementi STYLE e SCRIPT utilizzino CDATA per il loro modello di dati, per questi elementi, CDATA deve essere gestito in modo diverso dagli agenti utente. Markup ed entità devono essere trattati come testo non elaborato e passati all'applicazione così come sono. La prima occorrenza della sequenza di caratteri " </" (delimitatore aperto end-tag) viene considerata come la fine del contenuto dell'elemento. In documenti validi, questo sarebbe il tag di fine per l'elemento.

Tuttavia, in pratica, i browser terminano solo l'analisi di un blocco di script CDATA su un </script>tag di chiusura effettivo .

In XHTML non esiste una gestione così speciale per i blocchi di script, quindi qualsiasi <(o &) carattere al loro interno deve essere &escaped;come in qualsiasi altro elemento. Tuttavia, i browser che analizzano XHTML come HTML della vecchia scuola verranno confusi. Esistono soluzioni alternative che coinvolgono blocchi CDATA, ma è più semplice evitare di usare questi caratteri senza caratteri di escape. Un modo migliore di scrivere un elemento di script dallo script che funziona su entrambi i tipi di parser sarebbe:

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

Ecco un'altra variante che ho usato quando volevo generare un tag di script in linea (quindi si esegue immediatamente) senza bisogno di alcuna forma di escape:

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

(Nota: contrariamente alla maggior parte degli esempi in rete, non sto impostando type="text/javascript"né sul tag allegato, né su quello generato: non esiste un browser che non lo abbia come predefinito, quindi è ridondante, ma non farà male, se non sei d'accordo).

Penso che sia per impedire al parser HTML del browser di interpretare <script> e principalmente </script> come tag di chiusura dello script reale, tuttavia non penso che l'utilizzo di document.write sia un'ottima idea per valutare lo script blocchi, perché non usare il DOM ...

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

La soluzione pubblicata da Bobince funziona perfettamente per me. Volevo offrire un metodo alternativo anche per i futuri visitatori:

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);
    })();
}

In questo esempio, ho incluso un carico condizionale per jQuery per dimostrare il caso d'uso. Spero che sia utile per qualcuno!

L' </script>interno della stringa di Javascript litteral è interpretato dal parser HTML come tag di chiusura, causando comportamenti imprevisti ( vedi esempio su JSFiddle ).

Per evitare ciò, puoi inserire il tuo javascript tra i commenti (questo stile di programmazione era una pratica comune, quando JavaScript era scarsamente supportato tra i browser). Funzionerebbe ( vedi esempio in 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>

... ma ad essere sincero, l'utilizzo document.writenon è qualcosa che considererei la migliore pratica. Perché non manipolare direttamente il DOM?

<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>