---
title: HTMLScriptElement
slug: Web/API/HTMLScriptElement
translation_of: Web/API/HTMLScriptElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><span class="seoSummary">HTML-элементы {{HTMLElement("script")}} предоставляют <strong><code>HTMLScriptElement</code></strong> интерфейс, который предоставляет специальные свойства и методы для манипулирования поведением и выполнением <code>&lt;script&gt;</code> элементов (за пределами унаследованного {{domxref("HTMLElement")}} интерфейса).</span></p>

<p>JavaScript файлы должны обслуживаться с  <code>application/javascript</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>, но браузеры снисходительны и блокируют их только, если скрипты обслуживаются с типом изображение (<code>image/*</code>), типом видео (<code>video/*</code>), типом аудио (<code>audio/*</code>), или <code>text/csv</code>. Если скрипт заблокирован, его элемент получает событие {{event("error")}}; в противном случае, он получает событие {{event("success")}}.</p>

<p>{{InheritanceDiagram(600, 120)}}</p>

<h2 id="Свойства">Свойства</h2>

<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Имя</th>
   <th>Тип</th>
   <th>Описание</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code id="type_property">type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Представляет тип MIME сценария. Он отражает атрибут {{htmlattrxref("type","script")}}.</td>
  </tr>
  <tr>
   <td><code id="src_property">src</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Получает и отдаёт URL внешнего скрипта. Он отражает атрибут {{htmlattrxref("src","script")}}.</td>
  </tr>
  <tr>
   <td><code id="event_property">event</code>{{obsolete_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Старый, способ регистрации обработчиков событий на элементы в HTML-документе.</td>
  </tr>
  <tr>
   <td><code id="charset_property">charset</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Представляет кодировку символов внешнего скрипта. Он отражает атрибут {{htmlattrxref("charset","script")}}.</td>
  </tr>
  <tr>
   <td><code id="async_property">async</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td rowspan="2">
    <p>Атрибуты <code>async</code> и <code>defer</code> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">булевы</a> атрибуты, которые контролируют как скрипт должен выполняться. <strong>Атрибуты <code>defer</code> и <code>async</code> не должны быть указаны, если атрибут <code>src</code> отсутствует.</strong></p>

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

    <ol>
     <li>Если атрибут <code>async</code> представлен, то скрипт будет выполняться асинхронно по мере загрузки.</li>
     <li>Если атрибут <code>async</code> отсутствует, но представлен атрибут <code>defer</code>, то скрипт будет выполняться когда <a href="/en-US/docs/Web/Events/DOMContentLoaded">страница полностью загружена</a>.</li>
     <li>Если ни один атрибут не представлен, то скрипт извлекается и выполняется незамедлительно, блокируя дальнейший парсинг страницы.</li>
    </ol>

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

    <div class="note"><strong>Примечание:</strong> Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации. <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">Эти алгоритмы</a> описывают основную идею, но они основаны на правилах синтаксического анализа для {{HTMLElement("script")}} <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">открывающих</a> и <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">закрывающих</a> тэгах в HTML, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">во внешнем контенте</a>, и в<a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML"> XML</a>; правиле для метода  <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a>; обработке <a href="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">сценариев</a>; и так далее.</div>
   </td>
  </tr>
  <tr>
   <td><code id="defer_property">defer</code></td>
   <td>{{domxref("Boolean")}}</td>
  </tr>
  <tr>
   <td><code id="crossOrigin_property">crossOrigin </code>{{experimental_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>{{domxref("DOMString")}}, отражающий <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">настройку CORS </a>для элементов скрипта. Для скриптов из других <a href="/en-US/docs/Glossary/Origin">источников</a>, он контролирует, будет ли раскрыта информация об ошибке.</td>
  </tr>
  <tr>
   <td><code id="text_property">text</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>IDL атрибут <code>text</code> объединяет и возвращает содержимое всех <a href="/en-US/docs/DOM/Text"><code>Text</code> нод</a> внутри элемента {{HTMLElement("script")}} (игнорируя другие ноды, такие как комментарии) в древовидном порядке. При установке, он  действует также, как и IDL атрибут <a href="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a>.</p>

    <div class="note"><strong>Примечание:</strong> При вставке с использованием метода <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a>, элементы {{HTMLElement("script")}} выполняются (обычно синхронно), когда при вставке используются <a href="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> или <a href="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a>, они вообще не выполняются.</div>
   </td>
  </tr>
  <tr>
   <td><code>noModule</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>Это булево свойство выполняет остановку выполнения скрипта в браузере, поддерживающим <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 модули</a> — используется для запуска резервных скриптов, которые не поддерживают JavaScript модули.</td>
  </tr>
  <tr>
   <td><code>referrerPolicy</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>{{domxref("DOMString")}}, который отражает HTML атрибут {{htmlattrxref("referrerPolicy", "script")}} указывающий, какой реферер использовать при извлечении скриптов и выборках, выполненных сценариев.</td>
  </tr>
 </tbody>
</table>

<h2 id="Методы">Методы</h2>

<p><em>Нет специальных методов; наследует методы от родителей, {{domxref("HTMLElement")}}.</em></p>

<h2 id="Примеры">Примеры</h2>

<h3 id="Динамическое_импортирование_скриптов">Динамическое импортирование скриптов</h3>

<p>Давайте создадим функцию. которая импортирует новый скрипт в документ, создавая ноду {{HTMLElement("script")}} <em>непосредственно перед</em> {{HTMLElement("script")}}, в котором размещается следующий код (через {{domxref("document.currentScript")}}). Эти скрипты будут выполняться <strong>асинхронно</strong>. Для получения подробной информации смотрите свойства <a href="#defer_property"><code>defer</code></a> и <a href="#async_property"><code>async</code></a>.</p>

<pre class="brush: 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;
}</pre>

<p>Следующая функция, вместо добавления новых скриптов непосредственно перед элементом {{domxref("document.currentScript")}}, добавляет их как потомков тега {{HTMLElement("head")}}.</p>

<pre class="brush: 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;
}
</pre>

<p>Простое использование:</p>

<pre class="brush: js">affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });</pre>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmlscriptelement", "HTMLScriptElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Следующие свойства устарели: <code>htmlFor,</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>Нет изменений в сравнении с {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Первое определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>



<p>{{Compat("api.HTMLScriptElement")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>HTML-элемент {{HTMLElement("script")}}</li>
 <li>HTML-элемент {{HTMLElement("noscript")}}</li>
 <li>{{domxref("document.currentScript")}}</li>
 <li><a href="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (<span class="tlid-translation translation" lang="ru"><span title="">фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)</span></span></li>
 <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>