<script>: Элемент скрипта

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

Атрибуты

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

async

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

Для скриптов модулей, если присутствует атрибут async , то скрипты и все их зависимости будут загружены параллельно с разбором и оценены как только они будут доступны.

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

Этот атрибут позволяет устранить блокирование парсера JavaScript, где браузеру необходимо загрузить и оценить скрипты, прежде чем продолжить разбор. defer имеет аналогичный эффект в этом случае.

Если атрибут указан с атрибутом defer , элемент будет действовать так, как будто указан только атрибут async.

Это булевый атрибут: наличие булевого атрибута на элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение.

См. Совместимость с браузерами для получения сведений о поддержке браузерами. См. также Асинхронные скрипты для asm.js.

attributionsrc Экспериментальный

Указывает, что вы хотите, чтобы браузер отправил заголовок Attribution-Reporting-Eligible вместе с запросом на ресурс скрипта. На стороне сервера это используется для запуска отправки заголовка Attribution-Reporting-Register-Source или Attribution-Reporting-Register-Trigger в ответе для регистрации JavaScript-источника атрибуции или JavaScript-триггера атрибуции соответственно. Какой заголовок ответа должен быть отправлен, зависит от значения заголовка Attribution-Reporting-Eligible , который инициировал регистрацию.

Примечание: В качестве альтернативы JavaScript-источники или триггеры атрибуции могут быть зарегистрированы путем отправки запроса fetch() , содержащего опцию attributionReporting (установленная непосредственно в вызове fetch() или в объекте Request , переданном в вызов fetch()), или путем отправки XMLHttpRequest с вызовом setAttributionReporting() на объекте запроса.

Существует две версии этого атрибута, которые вы можете задать:

Булево, т. е. только имя attributionsrc . Это указывает, что вы хотите, чтобы заголовок Attribution-Reporting-Eligible был отправлен на тот же сервер, что и атрибут src . Это подходит, когда вы обрабатываете регистрацию источника или триггера атрибуции на том же сервере. При регистрации триггера атрибуции это свойство необязательно, и будет использоваться пустое строковое значение, если оно опущено.
Значение, содержащее один или несколько URL-адресов, например:
html
```
<script
  src="myscript.js"
  attributionsrc="https://a.example/register-source https://b.example/register-source"></script>
```
Это полезно в случаях, когда запрашиваемый ресурс не находится на сервере, которым вы управляете, или вы просто хотите обработать регистрацию источника атрибуции на другом сервере. В этом случае вы можете указать один или несколько URL-адресов в качестве значения attributionsrc. При выполнении запроса к ресурсу заголовок Attribution-Reporting-Eligible будет отправлен на указанные в attributionSrc URL-адреса в дополнение к источнику ресурса. Затем эти URL-адреса могут ответить с заголовком Attribution-Reporting-Register-Source или Attribution-Reporting-Register-Trigger для завершения регистрации.

Примечание: Указание нескольких URL-адресов означает, что на одной функции могут быть зарегистрированы несколько источников атрибуции. Например, у вас могут быть разные кампании, успех которых вы пытаетесь измерить, что включает в себя создание разных отчетов на разных данных.

Дополнительные сведения см. в API отчетов об атрибуции.

blocking Экспериментальный

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

render: Блокируется отображение содержимого на экране.

crossorigin

Обычные элементы script передают минимальную информацию в событие window.onerror для скриптов, которые не проходят стандартные проверки CORS. Чтобы разрешить ведение журнала ошибок для сайтов, использующих отдельный домен для статических медиа, используйте этот атрибут. См. Атрибуты параметров CORS для более подробного объяснения допустимых аргументов.

defer

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

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

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

Атрибут defer не влияет на скрипты модулей — они откладываются по умолчанию.

Скрипты с атрибутом defer будут выполняться в том порядке, в котором они появляются в документе.

Этот атрибут позволяет устранить блокирование парсера JavaScript, где браузеру необходимо загрузить и оценить скрипты, прежде чем продолжить разбор. async имеет аналогичный эффект в этом случае.

Если атрибут указан с атрибутом async , элемент будет действовать так, как будто указан только атрибут async.

fetchpriority

Предоставляет подсказку о приоритете при загрузке внешнего скрипта. Допустимые значения:

high: Указывает загрузку высокого приоритета по сравнению с другими внешними скриптами.
low: Указывает загрузку низкого приоритета по сравнению с другими внешними скриптами.
auto: По умолчанию: указывает автоматическое определение приоритета загрузки по отношению к другим внешним скриптам.

integrity

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

nomodule

Этот булевый атрибут устанавливается для указания того, что скрипт не должен выполняться в браузерах, которые поддерживают ES-модули — по сути, это может быть использовано для предоставления резервных скриптов для более старых браузеров, которые не поддерживают модульный код JavaScript.

nonce

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

referrerpolicy

Указывает, какой ссылочный адрес отправить при загрузке скрипта или ресурсов, загружаемых скриптом:

no-referrer: Заголовок Referer не будет отправлен.
no-referrer-when-downgrade: Заголовок Referer не будет отправлен для источников без TLS (HTTPS).
origin: Отправляемый ссылочный адрес будет ограничен источником страницы-отправителя: её схемой, хостом и портом.
origin-when-cross-origin: Ссылочный адрес, отправленный другим источникам, будет ограничен схемой, хостом и портом. Переходы в рамках одного источника всё ещё будут содержать путь.
same-origin: Ссылочный адрес будет отправлен для тех же источников, но запросы к другим источникам не будут содержать информацию о ссылочном адресе.
strict-origin: Отправлять только источник документа в качестве ссылочного адреса, когда уровень безопасности протокола остаётся неизменным (HTTPS→HTTPS), но не отправлять его менее защищённому ресурсу (HTTPS→HTTP).
strict-origin-when-cross-origin (по умолчанию): Отправлять полный URL при запросе к одному источнику, отправлять только источник, когда уровень безопасности протокола остаётся неизменным (HTTPS→HTTPS), и не отправлять заголовок менее защищённому ресурсу (HTTPS→HTTP).
unsafe-url: Ссылочный адрес будет включать источник и путь (но не фрагмент, пароль или имя пользователя). Это значение небезопасно, так как оно раскрывает источники и пути из защищённых TLS ресурсов для небезопасных источников.

Примечание: Пустое строковое значение ("") является как значением по умолчанию, так и значением по умолчанию, если referrerpolicy не поддерживается. Если referrerpolicy не указан явно в элементе <script>, он будет принимать политику ссылочного адреса более высокого уровня, т. е. политику, установленную для всего документа или домена. Если политика более высокого уровня недоступна, пустая строка рассматривается как эквивалент strict-origin-when-cross-origin.

src

Этот атрибут указывает URI внешнего скрипта; его можно использовать как альтернативу встраиванию скрипта непосредственно в документ.

type

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

Атрибут не установлен (по умолчанию), пустая строка или тип MIME JavaScript: Указывает, что скрипт является "классическим скриптом", содержащим код JavaScript. Авторам рекомендуется опустить атрибут, если скрипт ссылается на код JavaScript, а не указывать тип MIME. Типы MIME JavaScript перечислены в спецификации типов MIME IANA.
importmap: Это значение указывает, что тело элемента содержит карту импорта. Карта импорта — это объект JSON, который разработчики могут использовать для управления тем, как браузер разрешает спецификаторы модулей при импорте модулей JavaScript.
module: Это значение заставляет код обрабатываться как модуль JavaScript. Обработка содержимого скрипта откладывается. Атрибуты charset и defer не имеют эффекта. Сведения об использовании module, см. в нашем руководстве по модулям JavaScript. В отличие от классических скриптов, модульные скрипты требуют использования протокола CORS для загрузки из других источников.
speculationrules Экспериментальный: Это значение указывает, что тело элемента содержит правила спекуляции. Правила спекуляции имеют вид объекта JSON, который определяет, какие ресурсы браузер должен предварительно загрузить или предварительно отобразить. Это часть API правил спекуляции.
Любое другое значение: Встроенное содержимое обрабатывается как блок данных и не будет обрабатываться браузером. Разработчики должны использовать допустимый тип MIME, который не является типом MIME JavaScript, для обозначения блоков данных. Все остальные атрибуты будут проигнорированы, включая атрибут src.

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

charset Устаревший: Если присутствует, его значение должно быть ASCII регистронезависимым соответствием для "utf-8". Необязательно указывать атрибут charset, так как документы должны использовать UTF-8, и элемент script наследует кодировку символов из документа.
language Устаревший Нестандартный: Как и атрибут type, этот атрибут идентифицирует используемый язык сценариев. Однако в отличие от атрибута type, возможные значения этого атрибута никогда не были стандартизированы. Вместо этого следует использовать атрибут type.

Примечания

Скрипты без атрибутов async, defer или type="module", а также встроенные скрипты без атрибута type="module", загружаются и выполняются немедленно перед тем, как браузер продолжит обработку страницы.

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

Примеры

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

Эти примеры показывают, как импортировать (внешний) скрипт с помощью элемента <script>.

html

<script src="javascript.js"></script>

А следующие примеры показывают, как вставить (встроенный) скрипт внутрь элемента <script>.

html

<script>
  alert("Hello World!");
</script>

async и defer

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

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

Вот визуальное представление различных методов загрузки скриптов и их влияния на вашу страницу:

How the three script loading method work: default has parsing blocked while JavaScript is fetched and executed. With async, the parsing pauses for execution only. With defer, parsing isn't paused, but execution on happens after everything is else is parsed.

Это изображение взято из спецификации HTML, скопировано и обрезано до сокращенной версии, под лицензией CC BY 4.0.

Например, если у вас есть следующие элементы скрипта:

html

<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>

Вы не можете полагаться на порядок загрузки скриптов. jquery.js может загрузиться до или после script2.js и script3.js, и в этом случае любые функции в этих скриптах, зависящие от jquery, приведут к ошибке, потому что jquery не будет определено во время выполнения скрипта.

async следует использовать, когда у вас есть множество фоновых скриптов для загрузки, и вы просто хотите получить их как можно скорее. Например, возможно, у вас есть некоторые файлы данных игры, которые понадобятся, когда игра фактически начнётся, но пока вы просто хотите продолжить показ вступительного экрана, заголовков и лобби, не дожидаясь загрузки скриптов.

Скрипты, загруженные с помощью атрибута defer (см. ниже), будут выполняться в порядке их появления на странице и выполняться сразу после загрузки скрипта и содержимого:

html

<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>

Во втором примере мы можем быть уверены, что jquery.js загрузится до script2.js и script3.js, а script2.js загрузится до script3.js. Они не будут выполняться до тех пор, пока не загрузится весь контент страницы, что полезно, если ваши скрипты зависят от наличия DOM (например, они изменяют один или несколько элементов на странице).

В заключение:

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

Отказ от модуля

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

html

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

Импортирование модулей с помощью importmap

При импортировании модулей в скриптах, если вы не используете функцию type=importmap, каждый модуль должен импортироваться с помощью спецификатора модуля, который является либо абсолютным, либо относительным URL-адресом. В примере ниже первый спецификатор модуля ("./shapes/square.js") разрешается относительно базового URL-адреса документа, а второй — это абсолютный URL-адрес.

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

Карта импорта позволяет предоставить отображение, которое, если оно совпадает, может заменить текст в спецификаторе модуля. В карте импорта ниже определены ключи square и circle, которые могут использоваться в качестве псевдонимов для спецификаторов модулей, показанных выше.

html

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

Это позволяет импортировать модули, используя имена в спецификаторе модуля (вместо абсолютных или относительных URL-адресов).

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

Дополнительные примеры использования карт импорта см. в разделе Импортирование модулей с помощью карт импорта в руководстве по модулям JavaScript.

Вставка данных в HTML

Вы также можете использовать элемент <script> для вставки данных в HTML с помощью рендеринга на стороне сервера, указав допустимый тип MIME, не являющийся JavaScript, в атрибуте type.

html

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

Блокировка рендеринга до тех пор, пока скрипт не будет загружен и выполнен

Вы можете включить маркер render в атрибуте blocking; рендеринг страницы будет заблокирован до тех пор, пока скрипт не будет загружен и выполнен. В примере ниже мы блокируем рендеринг асинхронного скрипта, чтобы скрипт не блокировал парсинг, но гарантировал его оценку до начала рендеринга.

html

<script blocking="render" async src="async-script.js"></script>

Технический обзор

Категории контента	Метаданные, Поток содержимого, Фразирование.
Разрешенный контент	Динамический скрипт, такой как `text/javascript`.
Пропуск тега	Нет, и открывающий, и закрывающий теги обязательны.
Разрешенные родительские элементы	Любой элемент, принимающий метаданные или любой элемент, принимающий фразирование.
Неявная роль ARIA	Нет соответствующей роли
Разрешенные роли ARIA	Нет `role` разрешено
Интерфейс DOM	`HTMLScriptElement`

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

Спецификация
Стандарт HTML # the-script-element

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`script`	1	12	1 Начиная с Firefox 4, вставка элементов <script>, созданных с помощью вызова `document.createElement("script")`, больше не принудительно выполняется в порядке вставки. Это изменение позволяет Firefox правильно соблюдать спецификацию. Чтобы внешние скрипты, вставленные в скрипте, выполнялись в порядке их вставки, установите `.async=false` на них.	≤12.1	3	18	4	≤12.1	2	1.0	4.4
`async`	1	12	3.6	15	≤4	18	4	14	≤3.2	1.0	4.4
`attributionsrc`	117	117	Нет	103	Нет	117	Нет	78	Нет	24.0	117
`blocking`	105	105	Нет	91	Нет	105	Нет	72	Нет	20.0	105
`crossorigin`	19	14	14	12	6 Атрибут `crossorigin` был реализован в WebKit в WebKit ошибке 81438.	25	14	12	6 Атрибут `crossorigin` был реализован в WebKit в WebKit ошибке 81438.	1.5	4.4
`defer`	1 Chrome не откладывает скрипты с атрибутом `defer` при предоставлении страницы как XHTML (`application/xhtml+xml`), см. ошибку 611136 и ошибку 874749	12	3.5 С Firefox 3.6 атрибут `defer` игнорируется для скриптов без атрибута `src`. Однако в Firefox 3.5 даже встроенные скрипты откладываются, если установлен атрибут `defer`.	15 Opera не откладывает скрипты с атрибутом `defer` при предоставлении страницы как XHTML (`application/xhtml+xml`), см. ошибку 611136 и ошибку 874749	3	18 Chrome не откладывает скрипты с атрибутом `defer` при предоставлении страницы как XHTML (`application/xhtml+xml`), см. ошибку 611136 и ошибку 874749	4	14 Opera не откладывает скрипты с атрибутом `defer` при предоставлении страницы как XHTML (`application/xhtml+xml`), см. ошибку 611136 и ошибку 874749	2	1.0 Samsung Internet не откладывает скрипты с атрибутом `defer` при предоставлении страницы как XHTML (`application/xhtml+xml`), см. ошибку 611136 и ошибку 874749	4.4 Chrome не откладывает скрипты с атрибутом `defer` при предоставлении страницы как XHTML (`application/xhtml+xml`), см. ошибку 611136 и ошибку 874749
`fetchpriority`	101	101	Нет	Нет	17.2	101	Нет	70	17.2	19.0	101
`integrity`	45	17	43	32	11.1	45	43	32	11.3	5.0	45
`nomodule`	61	16	60	48	11	61	60	45	11	8.0	61
`referrerpolicy`	70	≤79	65	57	14	70	65	49	14	10.0	70
`src`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4
`type`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4

См. также

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script