aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/htmlscriptelement
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/htmlscriptelement
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-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.html284
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对象接口,他们也可以通过继承操纵&lt;脚本&gt;元素的布局和演示。)<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 &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>