diff options
Diffstat (limited to 'files/ru/web/html/element/script/index.html')
| -rw-r--r-- | files/ru/web/html/element/script/index.html | 225 |
1 files changed, 225 insertions, 0 deletions
diff --git a/files/ru/web/html/element/script/index.html b/files/ru/web/html/element/script/index.html new file mode 100644 index 0000000000..5f03eb7943 --- /dev/null +++ b/files/ru/web/html/element/script/index.html @@ -0,0 +1,225 @@ +--- +title: '<script>: The Script element' +slug: Web/HTML/Element/script +tags: + - Script +translation_of: Web/HTML/Element/script +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML Элемент<strong> <code><script></code> </strong></span> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <code><script></code> также может использоваться с другими языками, такими как <a href="/en-US/docs/Web/API/WebGL_API/By_example/Hello_GLSL">GLSL</a> от <a href="/ru/docs/Web/API/WebGL_API">WebGL</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Main_content_categories">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённый контент</th> + <td>Динамический скрипт, используя атрибут <code>text/javascript</code>.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>Нет. Открывающий и закрывающий теги обязательны</td> + </tr> + <tr> + <th scope="row">Разрешённые родительские элементы</th> + <td> + <p>Любые элементы в которых разрешены <a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">метаданные</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a></p> + </td> + </tr> + <tr> + <th scope="row">Разрешенная ARIA роль</th> + <td>Отсутствует</td> + </tr> + <tr> + <th scope="row">DOM интерфейс</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt> + <dd>Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте <code>{{htmlattrdef("src")}}</code>, асинхронно.</dd> +</dl> + +<div class="warning"> +<p>Атрибут <code>{{htmlattrdef("async")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p> +</div> + +<dl> + <dd> + <p>Обычно браузеры загружают <code><script></code> синхронно, (т.е. <code>async="false"</code>) во время разбора документа.</p> + </dd> + <dd> + <p>Динамически вставленный <code><script></code> (используя, например, <code>document.createElement</code>) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите <code>async="false"</code>.</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Обычные элементы тега <code>script</code> передают мало информации в {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} для скриптов, которые не проходят проверку <a href="/en-US/docs/HTTP_access_control">CORS</a>. Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут <code>{{htmlattrdef("crossorigin")}}</code>. Посмотрите статью «<a href="/ru/docs/Web/HTML/CORS_settings_attributes">настройки атрибутов CORS</a>» для более наглядного объяснения его допустимых аргументов.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события {{event("DOMContentLoaded")}}.</dd> + <dd>Скрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут предотвращать запуск события {{event("DOMContentLoaded")}} до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.</dd> +</dl> + +<div class="warning"> +<p>Атрибут <code>{{htmlattrdef("defer")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p> +</div> + +<dl> + <dd>Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте <code>async=false.</code></dd> + <dd>Cкрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут выполняться в том порядке, в котором они появились при разборе документа.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</dd> +</dl> + +<div class="warning"> +<p>Если у элемента <code>script</code> будет указан атрибут <code>{{htmlattrdef("src")}}</code>, то он не должен иметь встроенный скрипт между тегами.</p> +</div> + +<dl> + <dt>{{htmlattrdef("text")}}</dt> + <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:</p> + + <ul> + <li><strong>Omitted or a JavaScript MIME type:</strong> For HTML5-compliant browsers this indicates the script is JavaScript. HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li> + <li><strong><code>module</code>:</strong> For HTML5-compliant browsers the code is treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>{{htmlattrdef("defer")}}</code> attributes. For information on using <code>module</code>, see <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>. Code may behave differently when the <code>module</code> keyword is used.</li> + <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li> + </ul> + + <div class="note"> + <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code><script></code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p> + </div> + </dd> +</dl> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". Both it’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd> +</dl> + +<h2 id="Примечания">Примечания</h2> + +<p>Элемент <code><script></code> без указания атрибутов {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} или <code>type="module"</code>, а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.</p> + +<p>Для обработки скрипт должен иметь тип данных <code>text/javascript</code>, но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение (<code>image/*</code>); видео (<code>video/*</code>); аудио (<code>audio/*</code>); или <code>text/csv</code>. Если скрипт заблокирован, элементу отправляется событие {{event("error")}}, если не было отправлено событие {{event("load")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Основное_использование">Основное использование</h3> + +<p>Эти примеры показывают как импортировать скрипт используя элемент <code><script></code> в HTML4 и HTML5.</p> + +<pre class="brush: html"><!-- HTML4 --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<h3 id="Module_fallback">Module fallback</h3> + +<p>Браузеры, поддерживающие использование значения <code>module</code> для атрибута <code>type</code>, игнорируют любые скрипты с атрибутом <code>nomodule</code>. Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать <code>nomodule-</code>скрипты для браузеров без поддержки модульных скриптов.</p> + +<pre class="brush: html"><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script></pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Добавлен <code>module</code> {{HTMLAttrxRef("type", "script")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Добавлен атрибут {{HTMLAttrxRef("integrity", "script")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + + + +<p>{{Compat("html.elements.script", 2)}}</p> + +<h3 id="Примечания_по_совместимости">Примечания по совместимости</h3> + +<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p> + +<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async=false</code> on the scripts you want to maintain order.</p> + +<div class="warning"> +<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> + <li><a href="/en-US/docs/Games/Techniques/Async_scripts">Асинхронные скрипты для asm.js</a></li> +</ul> |