HTMLScriptElement

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

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

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

HTMLScriptElement.attributionSrc Безопасный контекст Экспериментальная

Получает и устанавливает атрибут attributionsrc для элемента <script> программно, отражая значение этого атрибута. attributionsrc указывает, что браузеру нужно отправлять заголовок Attribution-Reporting-Eligible вместе с запросом на ресурс скрипта. На стороне сервера это используется для отправки заголовка Attribution-Reporting-Register-Source или Attribution-Reporting-Register-Trigger в ответе для регистрации источника атрибуции на базе JavaScript или триггера атрибуции соответственно.

HTMLScriptElement.async

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

HTMLScriptElement.blocking

Строка, указывающая, что некоторые операции должны быть заблокированы при загрузке скрипта. Она отражает атрибут blocking элемента <script>.

HTMLScriptElement.charset Устаревший

Строка, представляющая кодировку символов внешнего скрипта. Она отражает атрибут charset.

HTMLScriptElement.crossOrigin

Строка, отражающая настройку CORS для элемента скрипта. Для классических скриптов из других источников это управляет отображением информации об ошибках.

HTMLScriptElement.defer

Булево значение, контролирующее выполнение скрипта. Для классических скриптов, если свойство defer установлено в true, внешний скрипт будет выполнен после разбора документа, но перед срабатыванием события DOMContentLoaded. Для модульных скриптов, свойство defer не оказывает влияния.

HTMLScriptElement.event Устаревший

Строка; устаревший способ регистрации обработчиков событий для элементов в HTML-документе.

HTMLScriptElement.fetchPriority

Необязательная строка, представляющая подсказку для браузера о том, как следует приоритизировать загрузку внешнего скрипта относительно других внешних скриптов. Если это значение предоставлено, оно должно быть одним из допустимых значений: high для загрузки с высоким приоритетом, low для загрузки с низким приоритетом или auto для обозначения отсутствия предпочтения (что является значением по умолчанию). Она отражает атрибут fetchpriority элемента <script>.

HTMLScriptElement.integrity

Строка, содержащая встроенные метаданные, которые браузер может использовать для проверки того, что полученный ресурс был доставлен без непредвиденных изменений. Она отражает атрибут integrity элемента <script>.

HTMLScriptElement.noModule

Булево значение, которое, если истинно, останавливает выполнение скрипта в браузерах, поддерживающих модули ES — используется для запуска резервных скриптов в старых браузерах, которые НЕ поддерживают модули JavaScript.

HTMLScriptElement.referrerPolicy

Строка, которая отражает атрибут referrerPolicy HTML, указывающий, какой реферер использовать при загрузке скрипта и загрузках, выполненных этим скриптом.

HTMLScriptElement.src

Строка, представляющая URL внешнего скрипта; это может быть использовано как альтернатива встраиванию скрипта непосредственно в документ. Она отражает атрибут src элемента <script>.

HTMLScriptElement.text

Строка, которая объединяет и возвращает содержимое всех узлов Text внутри элемента <script> (игнорируя другие узлы, такие как комментарии) в порядке обхода дерева. При установке она действует так же, как свойство Node.textContent.

Примечание: При вставке с помощью метода Document.write(), элементы <script> выполняются (обычно синхронно), но при вставке с помощью Element.innerHTML или Element.outerHTML они вообще не выполняются.

HTMLScriptElement.type

Строка, представляющая тип скрипта. Она отражает атрибут type элемента <script>.

HTMLScriptElement.supports()

Возвращает true, если браузер поддерживает скрипты указанного типа, и false, в противном случае. Этот метод предоставляет простой и унифицированный метод для обнаружения функциональности, связанной со скриптами.

Нет конкретных методов; наследует методы от родительского класса HTMLElement.

Нет специфических событий; наследует события от своего родителя, 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) {
  const 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) {
  const 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", () => {
  alert('The script "myScript2.js" has been correctly loaded.');
});

HTMLScriptElement.supports() предоставляет унифицированный механизм для проверки того, поддерживает ли браузер определенные типы скриптов.

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

function checkModuleSupport() {
  if ("supports" in HTMLScriptElement) {
    return HTMLScriptElement.supports("module");
  }
  return "noModule" in document.createElement("script");
}

Предполагается, что классические скрипты поддерживаются во всех браузерах.

• HTML <script> элемент
• HTML <noscript> элемент
• document.currentScript
• Web Workers (фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)