diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/htmlscriptelement/index.html | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-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.html | 190 |
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><script></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 <script> and <link> node event compatibility chart</a></li> +</ul> |