<script>: элемент для написания скриптов

HTML-элемент <script> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <script> также может использоваться с другими языками, такими как GLSL от WebGL.

Атрибуты

Этот элемент включает глобальные атрибуты.

async

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

Предупреждение: Атрибут async не будет оказывать никакого эффекта, если атрибут src отсутствует. Обычно браузеры загружают <script> синхронно, (т.е. async="false") во время разбора документа. Динамически вставленный <script> (используя, например, document.createElement) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите async="false".

crossorigin

Обычные элементы тега script передают мало информации в window.onerror для скриптов, которые не проходят проверку CORS. Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут crossorigin. Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.

defer

Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded. Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.

Предупреждение: Атрибут defer не будет оказывать никакого эффекта, если атрибут src отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте async=false. Скрипты с атрибутом defer будут выполняться в том порядке, в котором они появились при разборе документа.

integrity

Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса.

nomodule

Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.

nonce

Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy. Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.

src

Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.

Предупреждение: Если у элемента script будет указан атрибут src, то он не должен иметь встроенный скрипт между тегами.

text

Как и атрибут textContent, этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута textContent, этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM.

type

Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:

• Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
  • : Обозначает, что скрипт является "классическим скриптом", содержащим JavaScript-код. Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще. MIME-типы JavaScript указаны в спецификации.
• module
  • : Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем. Обработка содержимого скрипта отложенная. Атрибуты charset и defer игнорируются. Для дополнительной информации по использованию module, смотрите руководство по JavaScript-модулям. В отличие от классических скриптов, модули требуют использования CORS-протокола для кроссдоменных запросов.
• importmap
  • : Данное значение сигнализирует о том, что содержимое тега является словарём импортов. Словарь импортов - это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.
• Любое другое значение: Встроенный контент обрабатывается как блок данных, который не будет обрабатываться браузером. Разработчики должны использовать допустимый тип MIME, который не является типом MIME JavaScript, для обозначения блоков данных. Атрибут src будет проигнорирован.

Устаревшие атрибуты

charset Устарело

Если присутствует, его значение должно соответствовать "utf-8" без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.

language Устарело Не стандартно

Как и атрибут type, этот атрибут определяет используемый язык сценариев. Однако, в отличие от type, возможные значения language никогда не были стандартизированы. Вместо него следует использовать атрибут type.

Примечания

Элемент <script> без указания атрибутов async , defer или type="module", а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.

Для обработки скрипт должен иметь тип данных text/javascript, но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение (image/*); видео (video/*); аудио (audio/*); или text/csv. Если скрипт заблокирован, элементу отправляется событие error, если не было отправлено событие load.

Примеры

Основное использование

Эти примеры показывают как импортировать скрипт используя элемент <script> в HTML4 и HTML5.

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>
<!-- HTML5 -->
<script src="javascript.js"></script>

Фолбэк-модуль

Браузеры, поддерживающие использование значения module для атрибута type, игнорируют любые скрипты с атрибутом nomodule. Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать nomodule-скрипты для браузеров без поддержки модульных скриптов.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

Спецификации

Совместимость с браузерами

Смотрите также

• document.currentScript
• Статья Flavio Copes о эффективной загрузке JavaScript и различиях между атрибутами async и defer (англ.)
• Руководство по JavaScript-модулям