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.

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

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

JavaScript файлы должны обслуживаться с application/javascript MIME 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 отсутствует.

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

  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
# htmlscriptelement

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLScriptElement
async
attributionSrc
Experimental
blocking
charset
Deprecated
crossOrigin
defer
event
Deprecated
fetchPriority
htmlFor
Deprecated
integrity
noModule
referrerPolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
src
Can be set with a TrustedScriptURL instance
Experimental
supports() static method
text
Can be set with a TrustedScript instance
Experimental
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

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