diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/htmlscriptelement | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/htmlscriptelement')
-rw-r--r-- | files/zh-cn/web/api/htmlscriptelement/index.html | 284 |
1 files changed, 284 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlscriptelement/index.html b/files/zh-cn/web/api/htmlscriptelement/index.html new file mode 100644 index 0000000000..c9b85d01e8 --- /dev/null +++ b/files/zh-cn/web/api/htmlscriptelement/index.html @@ -0,0 +1,284 @@ +--- +title: HTMLScriptElement +slug: Web/API/HTMLScriptElement +translation_of: Web/API/HTMLScriptElement +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p>HTML脚本元素暴露HTMLScriptElement接口,它提供了特殊的属性和方法(超出了常规HTMLElement对象接口,他们也可以通过继承操纵<脚本>元素的布局和演示。)<br> + </p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>从其父类中继承的属性, {{domxref("HTMLElement")}}。</em><br> + </p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Name</th> + <th>Type</th> + <th>Description</th> + </tr> + <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>代表了使用外部脚本资源的地址。它反映了{{htmlattrxref("src","script")}}属性。</td> + </tr> + <tr> + <td><code id="htmlFor_property">htmlFor</code> {{obsolete_inline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>他htmlFor属性设置或返回的值的属性标签。属性指定的表单元素绑定到一个标签。</td> + </tr> + <tr> + <td><code id="event_property">event</code>{{obsolete_inline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>HTML DOM事件允许JavaScript注册不同的事件处理程序的元素在一个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><strong>async和defer属性值为bool,它用来说明script脚本应该如何执行。在没有src属性的情况下,async和defer属性可以不指定值。</strong></p> + + <p>使用该属性有三种模式可供选择,如果async属性存在,脚本将异步执行,只要它是可用的,如果async属性不存在,而defer属性存在,脚本将会在页面完成解析后执行,如果都不存在,那么脚本会在useragent解析页面之前被取出并立刻执行。</p> + + <div class="note"><strong>注意:这些属性的处理细节,主要是历史原因,有些重要的,涉及很多方面的HTML。因此实现需求的必要性分散在规范。这些描述这个处理的核心算法,但这些算法参考和引用的解析规则{ HTMLElement("脚本")} { }开始和结束标记在HTML中,在国外内容,并在XML中,规则的document . write()方法,处理脚本等。</strong></div> + + <p>延迟属性可以指定即使指定异步属性,导致遗留Web浏览器只支持推迟(而不是异步)回落推迟行为而不是同步阻塞是默认的行为。</p> + </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")}},对应于歌珥设置这个脚本元素。有关详细信息,请参阅歌珥设置属性。这对脚本控制,从其他来源,获得错误信息是否会被暴露出来。</td> + </tr> + <tr> + <td><code id="text_property">text</code></td> + <td>{{domxref("DOMString")}}</td> + <td> + <p>IDL属性内容的文本必须返回一个连接的所有文本节点的孩子{{HTMLElement("script")}}元素(忽略任何其他节点如评论或元素),在树的顺序。设置,它必须采取行动一样textContent IDL属性。</p> + + <div class="note"><strong>注意:当插入使用document . write()方法,{ { HTMLElement("脚本")} }元素执行(通常是同步),但当插入使用innerHTML和outerHTML属性,他们不执行。</strong></div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<p><em>没有具体的方法;属性从其父类继承, {{domxref("HTMLElement")}}。</em></p> + +<h2 id="例子">例子</h2> + +<h3 id="动态导入脚本">动态导入脚本</h3> + +<p>让我们创建一个名为importScript的函数,它能够在一个文档中导入新的脚本,创建一个{{HTMLElement("script")}} 节点,并立即插入到宿主{{HTMLElement("script")}} 之前 (通过 {{domxref("document.currentScript")}} 可以获取宿主script标签)。这些脚本将<strong>异步</strong>执行。更多细节,请参见defer和async属性。</p> + +<pre class="brush: js">function loadError (oError) { + throw new URIError("The script " + oError.target.src + " is not accessible."); +} + +function importScript (sSrc, fOnload) { + var oScript = document.createElement("script"); + oScript.type = "text\/javascript"; + oScript.onerror = loadError; + if (fOnload) { oScript.onload = fOnload; } + document.currentScript.parentNode.insertBefore(oScript, document.currentScript); + <span style="line-height: normal;">oScript.src = sSrc;</span> +}</pre> + +<p>…the same thing, but appending the new scripts as last childs of the {{ HTMLElement("head") }} tag, instead of appending them immediately before the {{domxref("document.currentScript")}} element:</p> + +<p>与上面大致相同,但有一点不同的是 新创建的script标签插入到了{{HTMLElement("head")}}标签的的最后,而不是插入到了{{domxref("document.currentScript")}}元素之前:</p> + +<pre class="brush: js">var importScript = (function (oHead) { + + function loadError (oError) { + throw new URIError("The script " + oError.target.src + " is not accessible."); + } + + return function (sSrc, fOnload) { + var oScript = document.createElement("script"); + oScript.type = "text\/javascript"; + oScript.onerror = loadError; + if (fOnload) { oScript.onload = fOnload; } + oHead.appendChild(oScript); + oScript.src = sSrc; + } + +})(document.head || document.getElementsByTagName("head")[0]); +</pre> + +<p>示例用法:</p> + +<pre class="brush: js">importScript("myScript1.js"); +importScript("myScript2.js", /* onload function: */ function () { alert("You read this alert because the script \"myScript2.js\" has been correctly loaded."); });</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</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>The following properties are now obsolete: <code>htmlFor,</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td> + <p>4 (follows a spec of its own)</p> + + <p>10 (by the spec)</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>crossOrigin</code> {{experimental_inline}}</td> + <td>{{WebKitBug(81438)}}</td> + <td>{{CompatGeckoDesktop("13")}} {{bug(696301)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{WebKitBug(81438)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>crossOrigin</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko-specific_notes">Gecko-specific notes</h3> + +<p> 从Gecko2.0 { { geckoRelease(" 2.0 ")} },插入脚本创建的元素通过调用document.createElement(“脚本”)到DOM不再强制执行插入顺序。这种变化让Gecko正确遵守HTML5规范。让script-inserted外部脚本执行的插入顺序,设置异步属性为false。<br> + </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>HTML {{ HTMLElement("script") }} element</li> + <li>HTML {{ HTMLElement("noscript") }} element</li> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (code snippets similar to scripts but executed in <a href="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope" title="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope">another global context</a>)</li> + <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> |