HTML тег script
Тег <script> определяет скрипты, исполняемые на стороне пользователя, например, JavaScript.
Элемент <script> либо непосредственно содержит сам скрипт, либо при помощи атрибута src указывает на внешний файл скрипта.
Если определяется атрибут src, то элемент <script> должен быть пустым.
Также, обратите внимание на элемент <noscript>, который предназначен для пользователей, браузер которых не поддерживает скрипты.
Существует несколько способов исполнения внешних скриптов:
- Если установлен атрибут async=»async», то скрипт исполняется асинхронно, т. е. скрипт будет исполняться одновременно с загрузкой страницы
- Если атрибут async не определен, а атрибут defer=»defer», то скрипт будет исполнен сразу же, как будет закончена загрузка страницы
- Если атрибуты async или defer не определены, то скрипт загружается и исполняется сразу же, до того как браузер продолжит готовит страницу к отображению
Разница между HTML 4.
01 и HTML5Атрибут type в HTML 4 обязателен, но оптционален в HTML5.
Атрибут async был добавлен в HTML5.
Различия между HTML и XHTML
В XHTML контент внутри скриптов декларируется как данные #PCDATA (вместо CDATA). Это означает, что сущности будут интерпретированы.
Это означает, что в XHTML все специальные символы должны быть кодированы, либо весь контент должен быть размещен в секции CDATA:
<script type="text/javascript"> //<![CDATA[ var i = 10; if (i < 5) { // некий код } //]]> </script>
Атрибуты тега <script>
Атрибут | Описание |
---|---|
async | Устанавливает асинхронный режим исполнения скрипта |
charset | Определяет кодировку символов скрипта |
defer | Устанавливает отложенный режим запуска скрипта, пока не будет загружена страница |
src | Определяет URL внешнего файла скрипта |
type | Определяет медиа-тип скрипта |
Общие атрибуты
Тег <script> поддерживает общие атрибуты.
HTML пример использования
Вставляет в код страницы надпись «Hello JavaScript!» при помощи JavaScript:
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>
Тег script
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮Назад Полный HTML Ссылки Дальше ❯
Пример
Написать «Hello JavaScript!» в JavaScript:
<script>
document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;
</script>
Определение и использование
Тег <script> используется для определения сценария на стороне клиента (JavaScript).
Элемент <script> содержит операторы сценариев или указывает на внешний файл сценария через атрибут src.
Обычное использование JavaScript — это манипулирование изображениями, проверка формы и динамические изменения содержимого.
Совет: Если вы хотите изучить JavaScript, посетите наш Учебник по JavaScript.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<script> | Да | Да | Да | Да | Да |
Советы и примечания
Примечание: Если присутствует атрибут <src>, элемент <script> должен быть пустым.
Совет: Также посмотрите на <noscript> для пользователей, которые отключили скрипты в своем браузере, или браузер, который не поддерживает сценарии на стороне клиента.
Примечание: Существует несколько способов выполнения внешнего скрипта:
- Если async=»async»: Скрипт выполняется асинхронно с остальной частью страницы (скрипт будет выполняться, пока страница продолжит разбор)
- Если Async не присутствует и defer=»defer»: Сценарий выполняется после завершения синтаксического анализа страницы
- Если не присутствует ни асинхронная, ни отложенная: сценарий извлекается и выполняется немедленно, прежде чем обозреватель продолжит разбор страницы
Различия между HTML 4,01 и HTML5
Атрибут «type» необходим в HTML 4, но необязателен в HTML5.
Атрибут «async» является новым в HTML5.
HTML 4,01 атрибут: «xml:space», не поддерживается в HTML5.
Различия между HTML и XHTML
В XHTML, содержимое внутри скриптов объявляется как #PCDATA (вместо CDATA), что означает, что сущности будут проанализированы.
Это означает, что в XHTML, все специальные символы должны быть закодированы, или все содержимое должно быть обернуто внутри раздела CDATA:
<script type=»text/javascript»>
//<![CDATA[
var i = 10;
if (i < 5) {
// some code
}
//]]>
</script>
Атрибуты
= Новый в HTML5.
Атрибут | Значение | Описание |
---|---|---|
async | async | Указывает, что сценарий выполняется асинхронно (только для внешних скриптов) |
charset | charset | Задает кодировку символов, используемую во внешнем файле сценария |
defer | defer | Указывает, что сценарий выполняется после завершения синтаксического анализа страницы (только для внешних скриптов) |
src | URL | Указывает URL-адрес внешнего файла сценария |
type | media_type | Указывает тип носителя сценария |
xml:space | preserve | Не поддерживается в HTML5. Указывает, следует ли сохранять пробелы в коде |
Глобальные атрибуты
Тег <script> также поддерживает Глобальные атрибуты в HTML.
Похожие страницы
HTML Учебник: HTML Scripts
HTML DOM reference: Script Object
JavaScript Учебник: Learn JavaScript
Параметры CSS по умолчанию
В большинстве обозревателей элемент <script> будет отображаться со следующими значениями по умолчанию:
script {
display: none;
}
❮Назад Полный HTML Ссылки Дальше ❯
Популярное
html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы
Copyright 2018-2020 HTML5CSS.ru
Правила и Условия Политика конфиденциальности О нас Контакты
Динамическое создание тегов скрипта с помощью Umbrella JS
В процессе замены jQuery на Umbrella JS в качестве слоя абстракции DOM (объектная модель документа) я столкнулся с небольшим странным поведением.
Похоже, что если бы я создал элемент
с помощью JS-конструктора Umbrella,код JavaScript в теге script был быинертным,если бы тег был создан как фрагмент HTML.Однако,если бы я создал тег с помощьюdocument.createElement()
,то содержимое JavaScript было бы выполнено при добавлении в DOM.Для этого создадим два тега,один из которых использует любой подход,добавим их к тегу
body
и посмотрим,что мы получим в консоли.Вот код JavaScript:
<голова><метакодировка="utf-8"/><название>Динамическое создание тегов сценария с помощью Umbrella JSназвание>голова><тело>Динамическое создание тегов сценария с помощью Umbrella JS
Как видите, мы используем следующие два вызова конструктора Umbrella JS для создания тегов скрипта:
-
и ("<скрипт>" )
-
u(document.createElement("сценарий"))
... затем мы устанавливаем значения textContent
и добавляем их в DOM. И когда мы выполняем этот код, мы получаем следующий вывод браузера:
Как видите, оба тега
были созданы и внедрены в DOM.Однако тот,который создан как фрагмент HTML,кажется инертным.Только тот,который создан с использованиемdocument.createElement()
был выполнен код JavaScript.
Чтобы было ясно,это не имеет никакого отношения к тому факту,что я устанавливаю свойствоtextContent
(через.text()
)— такое же инертное поведение наблюдалось бы,если бы я устанавливал атрибут
в для загрузки удаленного файла JavaScript. При создании с использованием фрагмента HTML удаленный файл сценария загружаться не будет.
Несколько лет назад я столкнулся с похожей проблемой с jQuery 9.0050 тоже. В этом посте jQuery не будет выполнять теги Script, созданные с помощью фрагмента HTML
.Итак,я предполагаю,что это не проблема jQuery/Umbrella JS,а скорее низкоуровневая проблема DOM.
Но,по крайней мере,есть действительно простой обходной путь с использованием собственного создания узла DOM.
Хотите использовать код из этого поста?Проверьте лицензию.
Твитнуть это Провокационные мысли@BenNadel — Динамическое создание тегов сценария с помощью Umbrella JS https:Флаг прямого союзникаТег сценария в документе HTML
Санг
• 4 мин чтения
В этом посте будут представлены спецификации свойств тега скрипта, которые могут помочь, если вы хотите оптимизировать время загрузки страницы.
Порядок загрузки тега скрипта
На следующем рисунке показано время загрузки тега скрипта в зависимости от его свойства. Есть несколько примечаний:
Источник: https://html.spec.whatwg.org/images/asyncdefer.svg-
defer
не следует сочетать сasync
. По определению спецификацииasync
имеет более высокий приоритет, что означает, чтоdefer
игнорируется.
Для классических сценариев, если присутствует атрибутasync
, классический сценарий будет извлекаться параллельно с анализом и оцениваться, как только он будет доступен (возможно, до завершения анализа). Еслиasync
атрибут отсутствует, но присутствует атрибутdefer
, тогда классический скрипт будет выбран параллельно и оценен после завершения синтаксического анализа страницы. Если ни один из атрибутов не присутствует, сценарий извлекается и оценивается немедленно, блокируя синтаксический анализ до тех пор, пока они не будут завершены.
- При наличии нескольких тегов script
defer
скрипты выполняются в том порядке, в котором они появляются в документе, аasync
скрипты выполняются асинхронно по завершении их синтаксического анализа. То естьasync
Порядок выполнения скриптов типа не сохраняется.
Для классических скриптов/модульных скриптов, если присутствует атрибут async
, то классический/модульный скрипт будет извлекаться параллельно с синтаксическим анализом и оцениваться, как только он будет доступен (возможно, до завершения синтаксического анализа)
- Уведомление красный цвет. Когда скрипт выполняется, анализ документа прекращается, потому что скрипт может содержать модификацию DOM, такую как
document.write()
. -
модуль
скрипты типаоткладывают
по умолчанию. Действительно, если атрибутdefer
указан в сценариимодуля
, он не действует. Когдаasync
предоставляется сценариюмодуля
, он становится асинхронным.
Из спецификаций WHATWG:
Атрибут defer
не влияет на скрипты модуля.
- Со встроенными скриптами (т.е.
src
не предоставляется), для модуля9Можно использовать сценарии типа 0004
async
, в то время как для классических сценариев нельзя использовать какasync
, так иdefer
.
Классические сценарии могут указыватьdefer
илиasync
, но не должны указывать ни то, ни другое, если не присутствует атрибутsrc
. Сценарии модулей могут указывать атрибутasync
, но не должны указывать атрибутdefer
.
Выполняется ли встроенное содержимое скрипта с src?
Другими словами, если есть тег скрипта
, что произойдет? (ранее испорченный ответ: НЕТ . И это никогда не рекомендуется).
В спецификации HTML 4.01 для w3c, если установлены как src
, так и встроенное содержимое, выполняется сценарий, полученный через src
, а встроенное содержимое игнорируется.
Сценарий может быть определен в содержимом элемента SCRIPT или во внешнем файле. Если атрибут src не установлен, пользовательские агенты должны интерпретировать содержимое элемента как сценарий. Если src имеет значение URI, пользовательские агенты должны игнорировать содержимое элемента и получать скрипт через URI 9.0096Из последней спецификации HTML (5) от WHATWG (последнее обновление 22 апреля 2021 г. ) при указании
src
содержимое должно быть пустым. В противном случае браузер может выдать ошибки, что приведет к неожиданному поведению. Однако на практике браузеры просто игнорируют встроенный контент.Если нет атрибутаsrc
, зависит от значения атрибута типа , но должен соответствовать ограничениям содержимого сценария.0004 элемент должен быть либо пустым, либо содержать только документацию скрипта, которая также соответствует ограничениям содержимого скрипта.Хотя это и не рекомендуется, некоторые библиотеки могут использовать встроенное содержимое тега сценария для предоставления текстовой информации сценарию. В этом случае, если скрипт загружается как модуль, используйте
import.meta
.
currentScript
, в противном случае используйтеDocument.currentScript
, чтобы вернуть элемент,сценарий которого обрабатывается в данный момент.
Обратите внимание:эти API-интерфейсы могут ссылаться на элемент,только если они вызываются синхронно из верхнего уровня скрипта(codepen).
Как выполнить встроенный код после загрузки удаленного скрипта?
Решение:динамически загружать скрипт и прослушивать его
событие загрузки
для выполнения встроенного кода.константный скрипт=document.createElement('сценарий') script.src='https://code.jquery.com/jquery-3.6.0.min.js' script.асинхронный=правда script.addEventListener('загрузить',()=>{script.parentNode?.removeChild(сценарий)}) document.head.appendChild(сценарий)Как асинхронно загрузить таблицу стилей?
В конце вашего документа поместите следующее значение html:
<скрипт> window.addEventListener('загрузить', функция (){ (requestAnimationFrame || setTimeout) (функция () { var addStylesNode = document.