---
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>