"为什么要拆分<script> tag when writing it with document.write()?"

Question

Why do some sites (or advertisers that give clients javascript code) employ a technique of splitting the <script> and/or </script> tags up within document.write() calls?

I noticed that Amazon does this as well, for example:

<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

<\/script><\/code> has to be broken up because otherwise it would end the enclosing <script><\/script><\/code> block too early. Really it should be split between the <<\/code> and the \/<\/code> , because a script block is supposed (according to SGML) to be terminated by any end-tag open (ETAGO) sequence (ie <\/<\/code> )<\/a> :

Answer 2

Here's another variation I've used when wanting to generate a script tag inline (so it executes immediately) without needing any form of escapes:

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

Answer 3

I think is for prevent the browser's HTML parser from interpreting the <script>, and mainly the <\/script> as the closing tag of the actual script, however I don't think that using document.write is a excellent idea for evaluating script blocks, why don't use the DOM...

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

Answer 4

The <\/script><\/code> inside the Javascript string litteral is interpreted by the HTML parser as a closing tag, causing unexpected behaviour ( see example on JSFiddle<\/a> ).

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

Answer 5

The solution Bobince posted works perfectly for me. I wanted to offer an alternative method as well for future visitors:

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