Навіщо розділяти тег <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>тезі.

У 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"ні тега, що додається, ні згенерованого: жоден браузер не має цього за замовчуванням, і тому він є зайвим, але не зашкодить, якщо ви не згодні).

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

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

Рішення, яке Бобінс розмістив, працює для мене ідеально. Я хотів запропонувати альтернативний метод і майбутнім відвідувачам:

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>