Неправильная ли практика встраивания JavaScript в тело HTML?

Команда, над которой я работаю, привыкла использовать теги <script> в случайных местах в теле наших HTML-страниц. Например:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

Я раньше этого не видел. Кажется, он работает в нескольких браузерах, которые я тестировал. Но, насколько мне известно, недействительно помещать теги script в такие места.

Неужели я ошибаюсь? Как плохо, что мы помещаем теги script в теги div так? Есть ли проблемы совместимости с браузером, о которых я должен знать?

ОТВЕТЫ

Ответ 1

Это совершенно верно.

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

  • добавить дополнительную информацию привязки для прогрессивного улучшения (где эти данные трудно укладывать в имя класса или другой подход к сокрытию расширенной информации в атрибутах); или

  • где необходимо как можно скорее запустить скриптовое усовершенствование (а не ждать загрузки окна/документа). Примером этого может быть автофокусировка, которая может раздражать, если слишком поздно срабатывать.

Возможно, вы думаете о <style> элементах, которые не разрешены в <body> (хотя большинство браузеров все же допускают его).

Ответ 2

Собственно, это довольно часто. Например, код отслеживания Google Analytics использует только этот синтаксис:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Если это будет достаточно для Google...

Ответ 3

Это действительно и, в зависимости от вашей серверной структуры и характера кода, иногда очень трудно избежать.

Ответ 4

действительно!

вы можете использовать:

<script type="text/javascript">
//<![CDATA[

// some javascrpt code that perfectly validates in the w3c validator

//]]>
</script>

Я не думаю, что вы можете сказать, является ли это плохой практикой в ​​целом. Вы должны сказать по этому делу. Но уверен, что хорошо иметь все ваши JS в одном месте. Это немного грязно, если у вас есть маленькие кусочки JS по всему вашему html файлу.

Ответ 5

Я предпочитаю помещать ссылки на внешние скрипты в голову и скрипты, которые запускают вещи и инициализируют виджеты и еще что-то в теле.

Проблема, с которой очень легко работать, заключается в том, что элемент script в теле не может обращаться к элементам, которые появляются после него. Кроме того, связанная с этим неприятная проблема совместимости браузеров заключается в том, что IE не позволяет элементам script изменять элемент, в котором они находятся. Поэтому, если у вас есть это:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE не понравится ваша страница. В старых версиях IE использовались очень загадочные сообщения об ошибках для этой или даже пустой всей страницы, но IE8, похоже, дает описательное сообщение об ошибке.

Пока вы убедитесь, что ваши скрипты имеют доступ только к DOM, который безопасен для доступа, я не думаю, что это зло для размещения элементов script в теле. Фактически, IMHO, помещая скрипты, которые инициализируют виджеты после связанных элементов, может быть более читабельным, чем помещение всего в одном месте (и я считаю, что это может также заставить их работать раньше, что заставляет вещи скатываться меньше по мере загрузки страницы).

Ответ 6

Как уже упоминалось несколько человек, его действие действительно работает, и оно широко используется.

Рекомендации по семантике рекомендуют (или, по крайней мере, рекомендуют) размещать теги script внутри заголовка.

Более современные передовые методы, которые учитывают эффективность, рекомендуют размещать теги script (внешние и встроенные) в нижней правой части тега body, чтобы позволить разметке полностью отображаться перед выполнением любого javascript.

Для упрощения понимания и поддержания кода рекомендуется использовать "ненавязчивый javascript", где код находится во внешнем файле и связывает события с DOM. (Google ненавязчивый javascript)

В одном случае, когда полезно иметь встроенный javascript, необходимо инициализировать переменные со значениями, которые существуют только на стороне сервера, которые затем будут использоваться внешним кодом JavaScript.

Ответ 8

Я раньше этого не видел. Кажется, он работает в нескольких браузерах, которые Я протестировал. Но, насколько я знаю, это недействительно для размещения тегов scriptв таких местах.

Это действительная, но не хорошая (или рекомендуемая) практика.

Неужели я ошибаюсь? Насколько плохо то, что мы помещаем теги script в div Теги такие как? Есть ли проблемы совместимости с браузерами, которые я должен знаете?

Нет никаких проблем при размещении <script> под любыми другими элементами (но это должно быть внутри <head> или <body>). Также нет проблем с точки зрения совместимости с браузером, однако внедрение JS-скриптов на веб-страницах представляет собой серьезные недостатки (как/почему они считаются плохими):

  • Добавляет вес страницы
  • Сложность (или, возможно, невозможная) для минимизации
  • Нельзя переносить или использовать для других страниц
  • Нельзя кэшировать (необходимо загружать каждый раз при загрузке страницы)
  • Отсутствие разделения проблем (сложнее в обслуживании)

Ответ 9

Это, конечно, законно, я видел это на нескольких страницах здесь, например, на Exforsys.

Теперь это учебный сайт, в котором показаны основы HTML и Javascript, поэтому в этом контексте он совершенно понятен. Тем не менее, я бы не хотел видеть это в производственном коде для чего-то большего, чем простое утверждение или два. Не видя, что вы заменили на //some javascipt here, я не хотел бы комментировать.

В этом случае не должно быть проблем с браузером.

Ответ 10

Однако, также хорошо, что вы знаете, что JS, необходимый для раздела HTML, будет для них. Вместо того, чтобы утверждать и создавать некоторые включения в верхней части файла.

Итак, вместо того, чтобы "если вы собираетесь использовать этот HTML-код, убедитесь, что вы импортируете xyz.js", вы можете просто включить HTML-код и сделать с ним.

Итак, это не обязательно ужасное зло. Возможно, это не впечатляюще потрясающе, но не совсем ужасно. Вид зависит от намерения.

Ответ 12

это одна из многих, многих лучших практик, которые в большей степени повышают производительность, а именно улучшают ваш подход к программированию. в конечном счете, в веб-разработке, чтобы получить продукт больше всего!

Ответ 13

Я предполагаю, что ваша команда делает это либо потому, что они хотят динамически вставить script, либо пишут script, которые будут срабатывать при загрузке страницы.

Я бы не сказал, что ничего плохого в этом, когда АБСОЛЮТНО НЕОБХОДИМО, (пока это в блоке CDATA), но вне этого, я бы рекомендовал вашей команде, чтобы они использовали библиотеку script, такую ​​как прототип или jQuery, и сохранить внешние сценарии на странице. Обычно это чище, и библиотеки иногда приводят к чистоте кода, который, как я бы сказал, не происходит в настоящее время.

Я также не буду запускать какие-либо трудоемкие функции в встроенных тегах script, поскольку это происходит при загрузке страницы, и, как сказал Джейсон выше, может замедлить загрузку страницы. Все библиотеки script имеют аккуратные функции, которые позволяют вам делать что-то при загрузке страницы, и предоставят вам возможность загружать страницы при загрузке страницы, например, после загрузки dom.

Ответ 14

Допустимо добавить тело, но IE действительно не любит его. поэтому, чтобы быть на более безопасной стороне, убедитесь, что у вас есть свои скрипты внутри тега.

который действительно создавал хаос (особенно для IE) в проекте, над которым мы работаем

Ответ 15

Несколько вещей:

  • Это полностью корректный код.
  • Это совершенно не рекомендуется.

Это значительно замедляет загрузку вашей страницы, так как Javascript должен выполняться до того, как любая другая часть страницы может отобразить. Если вы выполняете большую работу в этом Javascript, ваш браузер может зависать. Вы должны попытаться (по возможности) загружать свой Javascript динамически и в конце вашей страницы (желательно перед тегом </body>)

Купить и прочитать Высокопроизводительный Javascript. Это изменит способ написания JS.

Ответ 16

Указанная рекомендация о том, что скрипты должны храниться в заголовке, заключается в том, чтобы загрузить script до его вызова. Это только проблема для некоторых обработчиков событий. Для других типов script это не имеет значения, и для некоторых типов (например, document.write) это не имеет никакого смысла.

Ответ 17

Если у вас есть редактор, который может одновременно обрабатывать как html, так и javascript. И если вам нравится сначала читать несколько строк html, а затем javascript.. уверен. пойдите для этого.