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

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

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

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

Although the STYLE and SCRIPT elements use CDATA for their data model, for these elements, CDATA must be handled differently by user agents. Markup and entities must be treated as raw text and passed to the application as is. The first occurrence of the character sequence "</" (end-tag open delimiter) is treated as terminating the end of the element's content. In valid documents, this would be the end tag for the element.

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

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

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

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

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

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

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

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> внутри строки 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>