aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/htmlscriptelement/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/htmlscriptelement/index.html
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/api/htmlscriptelement/index.html')
-rw-r--r--files/ru/web/api/htmlscriptelement/index.html190
1 files changed, 190 insertions, 0 deletions
diff --git a/files/ru/web/api/htmlscriptelement/index.html b/files/ru/web/api/htmlscriptelement/index.html
new file mode 100644
index 0000000000..064a078e7f
--- /dev/null
+++ b/files/ru/web/api/htmlscriptelement/index.html
@@ -0,0 +1,190 @@
+---
+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>