HTMLScriptElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Свойства

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

Имя Тип Описание
type DOMString Представляет тип MIME сценария. Он отражает атрибут type.
src DOMString Получает и отдаёт URL внешнего скрипта. Он отражает атрибут src.
event DOMString Старый, способ регистрации обработчиков событий на элементы в HTML-документе.
charset DOMString Представляет кодировку символов внешнего скрипта. Он отражает атрибут charset.
async Boolean

Атрибуты async и defer булевы атрибуты, которые контролируют как скрипт должен выполняться. Атрибуты defer и async не должны быть указаны, если атрибут src отсутствует.

Существует три возможных режима выполнения:

  1. Если атрибут async представлен, то скрипт будет выполняться асинхронно по мере загрузки.
  2. Если атрибут async отсутствует, но представлен атрибут defer, то скрипт будет выполняться когда страница полностью загружена.
  3. Если ни один атрибут не представлен, то скрипт извлекается и выполняется незамедлительно, блокируя дальнейший парсинг страницы.

Атрибут 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.

js
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>.

js
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;
}

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

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

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

Specification
HTML Standard
# htmlscriptelement

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

BCD tables only load in the browser

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