HTMLScriptElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

HTML-элементы<script> предоставляютHTMLScriptElement интерфейс, который предоставляет специальные свойства и методы для манипулирования поведением и выполнением<script> элементов (за пределами унаследованногоHTMLElement интерфейса).

JavaScript файлы должны обслуживаться сapplication/javascriptMIME type, но браузеры снисходительны и блокируют их только, если скрипты обслуживаются с типом изображение (image/*), типом видео (video/*), типом аудио (audio/*), илиtext/csv. Если скрипт заблокирован, его элемент получает событиеerror; в противном случае, он получает событиеsuccess.

must be a string

Свойства

Наследует свойства от своего родителя,HTMLElement.

Имя	Тип	Описание
`type`	`DOMString`	Представляет тип MIME сценария. Он отражает атрибут`type`.
`src`	`DOMString`	Получает и отдаёт URL внешнего скрипта. Он отражает атрибут`src`.
`event`	`DOMString`	Старый, способ регистрации обработчиков событий на элементы в HTML-документе.
`charset`	`DOMString`	Представляет кодировку символов внешнего скрипта. Он отражает атрибут`charset`.
`async`	`Boolean`	Атрибуты`async` и`defer`булевы атрибуты, которые контролируют как скрипт должен выполняться.Атрибуты`defer` и`async` не должны быть указаны, если атрибут`src` отсутствует. Существует три возможных режима выполнения: Если атрибут`async` представлен, то скрипт будет выполняться асинхронно по мере загрузки. Если атрибут`async` отсутствует, но представлен атрибут`defer`, то скрипт будет выполняться когдастраница полностью загружена. Если ни один атрибут не представлен, то скрипт извлекается и выполняется незамедлительно, блокируя дальнейший парсинг страницы. Атрибут`defer` может быть указан с атрибутом`async`, тогда устаревшие браузеры, которые поддерживают только`defer` (но не`async`) откатятся к поведению`defer` взамен дефолтного поведения блокировки. Примечание: Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации.Эти алгоритмы описывают основную идею, но они основаны на правилах синтаксического анализа для`<script>`открывающих изакрывающих тэгах в HTML,во внешнем контенте, и в XML; правиле для метода`document.write()`; обработкесценариев; и так далее.
`defer`	`Boolean`
`crossOrigin`Экспериментальная возможность	`DOMString`	`DOMString`, отражающийнастройку CORSдля элементов скрипта. Для скриптов из другихисточников, он контролирует, будет ли раскрыта информация об ошибке.
`text`	`DOMString`	IDL атрибут`text` объединяет и возвращает содержимое всех`Text` нод внутри элемента`<script>` (игнорируя другие ноды, такие как комментарии) в древовидном порядке. При установке, он действует также, как и IDL атрибут`textContent`. Примечание: При вставке с использованием метода`document.write()`, элементы`<script>` выполняются (обычно синхронно), когда при вставке используются`innerHTML` или`outerHTML`, они вообще не выполняются.
`noModule`	`Boolean`	Это булево свойство выполняет остановку выполнения скрипта в браузере, поддерживающимES2015 модули — используется для запуска резервных скриптов, которые не поддерживают JavaScript модули.
`referrerPolicy`	`DOMString`	`DOMString`, который отражает HTML атрибут`referrerpolicy` указывающий, какой реферер использовать при извлечении скриптов и выборках, выполненных сценариев.

Методы

Нет специальных методов; наследует методы от родителей,HTMLElement.

Примеры

Динамическое импортирование скриптов

Давайте создадим функцию. которая импортирует новый скрипт в документ, создавая ноду<script>непосредственно перед<script>, в котором размещается следующий код (черезdocument.currentScript). Эти скрипты будут выполнятьсяасинхронно. Для получения подробной информации смотрите свойстваdefer иasync.

function loadError(oError) {  throw new URIError(    "The script " + oError.target.src + " didn't load correctly.",  );}function prefixScript(url, onloadFunction) {  var newScript = document.createElement("script");  newScript.onerror = loadError;  if (onloadFunction) {    newScript.onload = onloadFunction;  }  document.currentScript.parentNode.insertBefore(    newScript,    document.currentScript,  );  newScript.src = url;}

Следующая функция, вместо добавления новых скриптов непосредственно перед элементомdocument.currentScript, добавляет их как потомков тега<head>.

function loadError(oError) {  throw new URIError(    "The script " + oError.target.src + " didn't load correctly.",  );}function affixScriptToHead(url, onloadFunction) {  var newScript = document.createElement("script");  newScript.onerror = loadError;  if (onloadFunction) {    newScript.onload = onloadFunction;  }  document.head.appendChild(newScript);  newScript.src = url;}

Простое использование:

affixScriptToHead("myScript1.js");affixScriptToHead("myScript2.js", function () {  alert('The script "myScript2.js" has been correctly loaded.');});

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

Specification
HTML # htmlscriptelement

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

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

HTML-элемент<script>
HTML-элемент<noscript>
document.currentScript
Web Workers (фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)
Ryan Grove's <script> and <link> node event compatibility chart

Help improve MDN

Learn how to contribute

This page was last modified on⁨24 мар. 2025 г.⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換