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.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ru/web/api/html_dom_api/index.md)
HTML-элементы <script>
предоставляют HTMLScriptElement
интерфейс, который предоставляет специальные свойства и методы для манипулирования поведением и выполнением <script>
элементов (за пределами унаследованного HTMLElement
интерфейса).
JavaScript файлы должны обслуживаться с application/javascript
MIME type, но браузеры снисходительны и блокируют их только, если скрипты обслуживаются с типом изображение (image/*
), типом видео (video/*
), типом аудио (audio/*
), или text/csv
. Если скрипт заблокирован, его элемент получает событие unsupported templ: event; в противном случае, он получает событие unsupported templ: event.
must be a string
Свойства
Наследует свойства от своего родителя, 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 Standard # htmlscriptelement |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- HTML-элемент
<script>
- HTML-элемент
<noscript>
document.currentScript
- Web Workers (фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)
- Ryan Grove's <script> and <link> node event compatibility chart