Зачем разделять тег <script> при написании его с помощью document.write ()?

Почему некоторые сайты (или рекламодатели, которые предоставляют клиентам код JavaScript) используют технику разделения тегов <script>и / или </script>внутри document.write()вызовов?

Я заметил, что Amazon также делает это, например:

<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>должен быть разбит, потому что в противном случае это приведет к <script></script>преждевременному завершению блока. На самом деле он должен быть разделен между <и /, потому что предполагается, что блок скрипта (согласно SGML) завершается любой последовательностью открытия конечного тега (ETAGO) (то есть </) :

Хотя элементы STYLE и SCRIPT используют CDATA для своей модели данных, для этих элементов пользовательские агенты должны обрабатывать CDATA по-разному. Разметка и сущности должны обрабатываться как необработанный текст и передаваться приложению как есть. Первое вхождение последовательности символов " </" (открытый разделитель конечных тегов) обрабатывается как завершение конца содержимого элемента. В допустимых документах это будет конечный тег для элемента.

Однако на практике браузеры заканчивают парсинг блока сценариев CDATA только фактическим </script>тегом close.

В XHTML такой специальной обработки для блоков скриптов нет, поэтому любой <(или &) символ внутри них должен быть таким же, &escaped;как и в любом другом элементе. Однако тогда запутанные браузеры, анализирующие XHTML как устаревший HTML. Существуют обходные пути, связанные с блоками CDATA, но проще всего избежать использования этих символов без экранирования. Лучший способ написания элемента script из скрипта, который работает с любым типом парсера:

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

Вот еще один вариант, который я использовал, когда хотел сгенерировать встроенный тег script (чтобы он выполнялся немедленно) без необходимости экранирования:

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

(Примечание: вопреки большинству примеров в сети, я не устанавливаю type="text/javascript"ни теги включения, ни сгенерированный тег: нет браузера, не имеющего этого по умолчанию, и поэтому он является избыточным, но также не повредит, если вы не согласны).

Я думаю, что для предотвращения того, чтобы синтаксический анализатор HTML браузера интерпретировал <script>, и главным образом </ script>, как закрывающий тег реального скрипта, однако я не думаю, что использование document.write является отличной идеей для оценки скрипта блоки, почему бы не использовать DOM ...

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

Решение, опубликованное Bobince, отлично подходит для меня. Я хотел предложить альтернативный метод для будущих посетителей:

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

В этом примере я включил условную загрузку для jQuery, чтобы продемонстрировать вариант использования. Надеюсь, это кому-нибудь пригодится!

</script>Внутри строки litteral Javascript интерпретируется HTML парсер в качестве закрывающего тега, вызывая неожиданное поведение ( см пример на JSFiddle ).

Чтобы избежать этого, вы можете размещать свой javascript между комментариями (этот стиль кодирования был обычной практикой, когда Javascript плохо поддерживался браузерами). Это будет работать ( см. Пример в 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>

... но, если честно, использование document.write- это не то, что я бы посчитал лучшей практикой. Почему бы не манипулировать 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>