HTMLScriptElement

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

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

Свойства

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

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

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

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

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

Атрибут defer может быть указан с атрибутом async, тогда устаревшие браузеры, которые поддерживают только defer (но не async) откатятся к поведению defer взамен дефолтного поведения блокировки.

Примечание: Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации. Эти алгоритмы описывают основную идею, но они основаны на правилах синтаксического анализа для <script> открывающих и закрывающих тэгах в HTML, во внешнем контенте, и в XML; правиле для метода document.write() (en-US); обработке сценариев; и так далее.
defer Boolean (en-US)
crossOrigin Экспериментальная возможность DOMString DOMString, отражающий настройку CORS для элементов скрипта. Для скриптов из других источников, он контролирует, будет ли раскрыта информация об ошибке.
text DOMString

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

Примечание: При вставке с использованием метода document.write() (en-US), элементы <script> выполняются (обычно синхронно), когда при вставке используются innerHTML (en-US) или outerHTML (en-US), они вообще не выполняются.
noModule Boolean (en-US) Это булево свойство выполняет остановку выполнения скрипта в браузере, поддерживающим 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

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