Revision 1115831 of HTMLScriptElement

<div>{{APIRef("HTML DOM")}}</div>

<p>HTML script elements expose the <strong><code>HTMLScriptElement</code></strong> interface, which provides special properties and methods (beyond the regular {{domxref("HTMLElement")}} object interface they also have available to them by inheritance) for manipulating the layout and presentation of {{HTMLElement("script")}} elements.</p>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Name</th>
   <th>Type</th>
   <th>Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code id="type_property">type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Represents the<a href="https://www.w3.org/html/wg/drafts/html/master/infrastructure.html#valid-mime-type"> MIME type</a> of the script. It reflects the {{htmlattrxref("type","script")}} attribute. For how to parse <em>exotic programming languages</em>, please read <a href="/en-US/Add-ons/Code_snippets/Rosetta">this article</a>.</td>
  </tr>
  <tr>
   <td><code id="src_property">src</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Represents gives the address of the external script resource to use. It reflects the {{htmlattrxref("src","script")}} attribute.</td>
  </tr>
  <tr>
   <td><code id="htmlFor_property">htmlFor</code> {{obsolete_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>The htmlFor property sets or returns the value of the for attribute of a label. The for attribute specifies which form element a label is bound to.</td>
  </tr>
  <tr>
   <td><code id="event_property">event</code>{{obsolete_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.</td>
  </tr>
  <tr>
   <td><code id="charset_property">charset</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Represents the character encoding of the external script resource. It reflects the {{htmlattrxref("charset","script")}} attribute.</td>
  </tr>
  <tr>
   <td><code id="async_property">async</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td rowspan="2">
    <p>The <code>async</code> and <code>defer</code> attributes are <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">boolean</a> attributes that indicate how the script should be executed. <strong>The <code>defer</code> and <code>async</code> attributes must not be specified if the <code>src</code> attribute is not present.</strong></p>

    <p>There are three possible modes that can be selected using these attributes. If the <code>async</code> attribute is present, then the script will be executed asynchronously, as soon as it is available. If the <code>async</code> attribute is not present but the <code>defer</code> attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.</p>

    <div class="note"><strong>Note:</strong> The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. <a href="https://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">These algorithms</a> describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for {{HTMLElement("script")}}&nbsp;<a href="https://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">start</a> and <a href="https://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">end</a> tags in HTML, <a href="https://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">in foreign content</a>, and <a href="https://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML">in XML</a>, the rules for the <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a> method, the handling of <a href="https://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">scripting</a>, etc.</div>

    <p>The <code>defer</code> attribute may be specified even if the <code>async</code> attribute is specified, to cause legacy Web browsers that only support <code>defer</code> (and not <code>async</code>) to fall back to the <code>defer</code> behavior instead of the synchronous blocking behavior that is the default.</p>
   </td>
  </tr>
  <tr>
   <td><code id="defer_property">defer</code></td>
   <td>{{domxref("Boolean")}}</td>
  </tr>
  <tr>
   <td><code id="crossOrigin_property">crossOrigin&nbsp;</code>{{experimental_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this script element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS&nbsp;settings attributes</a> for details. It controls, for scripts that are obtained from other <a href="https://www.w3.org/html/wg/drafts/html/master/browsers.html#origin-0">origins</a>, whether error information will be exposed.</td>
  </tr>
  <tr>
   <td><code id="text_property">text</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>The IDL attribute <code>text</code> must return a concatenation of the contents of all the <a href="/en-US/docs/DOM/Text"><code>Text</code> nodes</a> that are children of the {{HTMLElement("script")}} element (ignoring any other nodes such as comments or elements), in tree order. On setting, it must act the same way as the <a href="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a> IDL attribute.</p>

    <div class="note"><strong>Note:</strong> When inserted using the <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a> method, {{HTMLElement("script")}} elements execute (typically synchronously), but when inserted using <a href="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> and <a href="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a> attributes, they do not execute at all.</div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p><em>No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>

<h2 id="Examples">Examples</h2>

<h3 id="Dynamically_importing_scripts">Dynamically importing scripts</h3>

<p>Let's create a function named <code>importScript(<em>url</em>[, <em>onloadFunction</em>])</code> able to import new scripts within a document creating a {{HTMLElement("script")}} node <em>immediately before</em> the {{HTMLElement("script")}} which hosts the following code (got through {{domxref("document.currentScript")}}). These scripts will be <strong>asynchronously</strong> executed. For more details, see the <a href="#defer_property"><code>defer</code></a> and <a href="#async_property"><code>async</code></a> properties.</p>

<pre class="brush: js">
function loadError (oError) {
&nbsp; throw new URIError("The script " + oError.target.src + " is not accessible.");
}

function importScript (sSrc, fOnload) {
&nbsp; var oScript = document.createElement("script");
&nbsp; oScript.type = "text\/javascript";
&nbsp; oScript.onerror = loadError;
&nbsp; if (fOnload) { oScript.onload = fOnload; }
&nbsp; document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
  oScript.src = sSrc;
}</pre>

<p>…the same thing, but appending the new scripts as last children of the {{HTMLElement("head")}} tag, instead of appending them immediately before the {{domxref("document.currentScript")}} element:</p>

<pre class="brush: js">
var importScript = (function (oHead) {

&nbsp; function loadError (oError) {
&nbsp;&nbsp;&nbsp; throw new URIError("The script " + oError.target.src + " is not accessible.");
&nbsp; }

&nbsp; return function (sSrc, fOnload) {
&nbsp;&nbsp;&nbsp; var oScript = document.createElement("script");
&nbsp;&nbsp;&nbsp; oScript.type = "text\/javascript";
&nbsp;&nbsp;&nbsp; oScript.onerror = loadError;
&nbsp;&nbsp;&nbsp; if (fOnload) { oScript.onload = fOnload; }
&nbsp;&nbsp;&nbsp; oHead.appendChild(oScript);
    oScript.src = sSrc;
&nbsp; }

})(document.head || document.getElementsByTagName("head")[0]);
</pre>

<p>Sample usage:</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="Specifications">Specifications</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>&nbsp;</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="Browser_compatibility">Browser compatibility</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")}}<sup>[2]</sup></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>4<sup>[4]</sup><br />
    10</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>crossOrigin</code> {{experimental_inline}}</td>
   <td>1.0<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("13")}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>4.0<sup>[1]</sup></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")}}<sup>[1]</sup></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>

<p>[1] This was implemented in {{WebKitBug(81438)}}.</p>

<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set the <code>async</code> property to <code>false</code> on them.</p>

<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p>

<p>[3] This was implemented in {{bug(696301)}}.</p>

<p>[4] Internet Explorer 4 implements this feature by its own specification. Starting from version 10 the implementation aligns to the official specification.</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">Web Workers</a> (code snippets similar to scripts but executed in <a href="/en-US/docs/JavaScript/DedicatedWorkerGlobalScope">another global context</a>)</li>
 <li><a href="https://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>