HTMLScriptElement

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.

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."); });

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'HTMLScriptElement' в этой спецификации.		 Живой стандарт
HTML 5.1
Определение 'HTMLScriptElement' в этой спецификации.		 Рекомендация
HTML5
Определение 'HTMLScriptElement' в этой спецификации.		 Рекомендация Следующие свойства устарели: htmlFor,.
Document Object Model (DOM) Level 2 HTML Specification
Определение 'HTMLScriptElement' в этой спецификации.		 Устаревшая Нет изменений в сравнении с Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification
Определение 'HTMLScriptElement' в этой спецификации.		 Устаревшая Первое определение.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
HTMLScriptElementChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
asyncChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 10Opera Нет поддержки НетSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
charsetChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
crossOrigin
Экспериментальная
Chrome Полная поддержка 1Edge Полная поддержка 14Firefox Полная поддержка 13IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 4WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
deferChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 10
Полная поддержка 10
Нет поддержки 4 — 10
Замечания
Замечания Non-standard implementation
Opera Нет поддержки НетSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
event
Устаревшая
Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
htmlFor
Устаревшая
Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
noModule
Экспериментальная
Chrome Полная поддержка ДаEdge Полная поддержка 16Firefox Полная поддержка 60
Полная поддержка 60
Нет поддержки 55 — 60
Отключено
Отключено From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 60
Полная поддержка 60
Нет поддержки 55 — 60
Отключено
Отключено From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
referrerPolicyChrome Полная поддержка 70Edge Полная поддержка ≤79Firefox Полная поддержка 65IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 14WebView Android Полная поддержка 70Chrome Android Полная поддержка 70Firefox Android Полная поддержка 65Opera Android Полная поддержка ДаSafari iOS Полная поддержка 14Samsung Internet Android Полная поддержка 10.0
srcChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
textChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
typeChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

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

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