HTMLScriptElement
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 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.
Свойства
Наследует свойства от своего родителя, HTMLElement.
| Имя | Тип | Описание |
|---|---|---|
type | DOMString | Представляет тип MIME сценария. Он отражает атрибут type. |
src | DOMString | Получает и отдаёт URL внешнего скрипта. Он отражает атрибут src. |
event | DOMString | Старый, способ регистрации обработчиков событий на элементы в HTML-документе. |
charset | DOMString | Представляет кодировку символов внешнего скрипта. Он отражает атрибут charset. |
async | Boolean | Атрибуты Существует три возможных режима выполнения:
Атрибут Примечание: Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации. Эти алгоритмы описывают основную идею, но они основаны на правилах синтаксического анализа для <script> открывающих и закрывающих тэгах в HTML, во внешнем контенте, и в XML; правиле для метода document.write(); обработке сценариев; и так далее. |
defer | Boolean | |
crossOrigin Экспериментальная возможность | DOMString | DOMString, отражающий настройку CORS для элементов скрипта. Для скриптов из других источников, он контролирует, будет ли раскрыта информация об ошибке. |
text | DOMString | IDL атрибут Примечание: При вставке с использованием метода 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.'); }); Спецификации
| Specification |
|---|
| HTML # htmlscriptelement |
Совместимость с браузерами
Смотрите также
- HTML-элемент
<script> - HTML-элемент
<noscript> document.currentScript- Web Workers (фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)
- Ryan Grove's <script> and <link> node event compatibility chart