<script>: элемент для написания скриптов
HTML Элемент <script> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <script> также может использоваться с другими языками, такими как GLSL (en-US) от WebGL.
| Content categories | Метаданные, Потоковый контент, Фразовый контент. |
|---|---|
| Допустимый контент | Динамический скрипт, используя атрибут text/javascript. |
| Пропуск тегов | Нет. Открывающий и закрывающий теги обязательны |
| Допустимые родители | Любые элементы в которых разрешены метаданные или фразовый контент |
| Допустимые ARIA-роли | нет |
| DOM-интерфейс | HTMLScriptElement |
Атрибуты
Этот элемент включает глобальные атрибуты.
async-
Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте
, асинхронно.srcПредупреждение: Атрибут
не будет оказывать никакого эффекта, если атрибутasyncотсутствует. Обычно браузеры загружаютsrc<script>синхронно, (т.е.async="false") во время разбора документа. Динамически вставленный<script>(используя, например,document.createElement) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажитеasync="false". crossorigin-
Обычные элементы тега
scriptпередают мало информации вwindow.onerrorдля скриптов, которые не проходят проверку CORS (en-US). Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут. Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.crossorigin defer-
Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события
DOMContentLoaded (en-US). Скрипты с атрибутомбудут предотвращать запуск событияdeferDOMContentLoaded (en-US)до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация. integrity-
Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса (en-US).
nomodule-
Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.
nonce-
Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy (en-US). Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.
src-
Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.
Предупреждение: Если у элемента
scriptбудет указан атрибут, то он не должен иметь встроенный скрипт между тегами.src text-
Как и атрибут
textContent, этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибутаtextContent, этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM. type-
Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:
- Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
- : Обозначает, что скрипт является "классическим скриптом", содержащим JavaScript-код. Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще. MIME-типы JavaScript указаны в спецификации.
module-
: Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем.
Обработка содержимого скрипта отложенная.
Атрибуты
charsetиdeferигнорируются. Для дополнительной информации по использованиюmodule, смотрите руководство по JavaScript-модулям. В отличие от классчических скриптов, модули требуют использования CORS-протокола для cross-origin загрузок.
-
: Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем.
Обработка содержимого скрипта отложенная.
Атрибуты
importmap(en-US)- : Данное значение сигнализирует о том, что содержимое тега является словарём импортов. Словарь импортов - это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.
- Любое другое значение: Встроенный контент обрабатывается как блок данных, который не будет обрабатываться браузером. Разработчики должны использовать допустимый тип MIME, который не является типом MIME JavaScript, для обозначения блоков данных. Атрибут
srcбудет проигнорирован.
- Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
Устаревшие атрибуты
charsetУстарело-
Если присутствует, его значение должно соответствовать "utf-8" без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.
languageУстарело Non-standard-
Как и атрибут
type, этот атрибут определяет используемый язык сценариев. Однако, в отличие отtype, возможные значенияlanguageникогда не были стандартизированы. Вместо него следует использовать атрибутtype.
Примечания
Элемент <script> без указания атрибутов async , defer или type="module", а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.
Для обработки скрипт должен иметь тип данных text/javascript, но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение (image/*); видео (video/*); аудио (audio/*); или text/csv. Если скрипт заблокирован, элементу отправляется событие error (en-US), если не было отправлено событие load (en-US).
Примеры
Основное использование
Эти примеры показывают как импортировать скрипт используя элемент <script> в HTML4 и HTML5.
html
<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>
<!-- HTML5 -->
<script src="javascript.js"></script>
Фолбэк-модуль
Браузеры, поддерживающие использование значения module для атрибута type, игнорируют любые скрипты с атрибутом nomodule. Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать nomodule-скрипты для браузеров без поддержки модульных скриптов.
html
<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>
Спецификации
| Specification |
|---|
| HTML Standard # the-script-element |
Совместимость с браузерами
BCD tables only load in the browser