HTML script elements expose the HTMLScriptElement
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.
Properties
Inherits properties from its parent, {{domxref("HTMLElement")}}.
Name | Type | Description |
---|---|---|
type |
{{domxref("DOMString")}} | Represents the MIME type of the script. It reflects the {{htmlattrxref("type","script")}} attribute. For how to parse exotic programming languages, please read this article. |
src |
{{domxref("DOMString")}} | Represents gives the address of the external script resource to use. It reflects the {{htmlattrxref("src","script")}} attribute. |
htmlFor {{obsolete_inline}} |
{{domxref("DOMString")}} | 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. |
event {{obsolete_inline}} |
{{domxref("DOMString")}} | HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. |
charset |
{{domxref("DOMString")}} | Represents the character encoding of the external script resource. It reflects the {{htmlattrxref("charset","script")}} attribute. |
async |
{{domxref("Boolean")}} |
The There are three possible modes that can be selected using these attributes. If the Note: 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. These algorithms describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for {{ HTMLElement("script") }} start and end tags in HTML, in foreign content, and in XML, the rules for the
document.write() method, the handling of scripting, etc.The |
defer |
{{domxref("Boolean")}} | |
crossOrigin {{experimental_inline}} |
{{domxref("DOMString")}} | Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this script element. See CORS settings attributes for details. It controls, for scripts that are obtained from other origins, whether error information will be exposed. |
text |
{{domxref("DOMString")}} |
The IDL attribute Note: When inserted using the
document.write() method, {{ HTMLElement("script") }} elements execute (typically synchronously), but when inserted using innerHTML and outerHTML attributes, they do not execute at all. |
Methods
No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}.
Examples
Dynamically importing scripts
Let's create a function named importScript(url[, onloadFunction])
able to import new scripts within a document creating a {{ HTMLElement("script") }} node immediately before the {{ HTMLElement("script") }} which hosts the following code (got through {{domxref("document.currentScript")}}). These scripts will be asynchronously executed. For more details, see the defer
and async
properties.
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);
oScript.src = sSrc;
}
…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:
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]);
Sample usage:
importScript("myScript1.js"); importScript("myScript2.js", /* onload function: */ function () { alert("You read this alert because the script \"myScript2.js\" has been correctly loaded."); });
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', "scripting-1.html#the-script-element", "HTMLScriptElement")}} | {{Spec2('HTML WHATWG')}} | No change from {{SpecName("HTML5 W3C")}}. |
{{SpecName('HTML5.1', "scripting-1.html#the-script-element", "HTMLScriptElement")}} | {{Spec2('HTML5.1')}} | |
{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}} | {{Spec2('HTML5 W3C')}} | The following properties are now obsolete: htmlFor, . |
{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}} | {{Spec2('DOM2 HTML')}} | No change from {{SpecName("DOM1")}}. |
{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}} | {{Spec2('DOM1')}} | Initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoDesktop("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
async |
{{CompatVersionUnknown}} | {{CompatGeckoDesktop("1.9.2")}} | 10 | {{CompatNo}} | {{CompatVersionUnknown}} |
defer |
{{CompatVersionUnknown}} | {{CompatGeckoDesktop("1.9.1")}} |
4 (follows a spec of its own) 10 (by the spec) |
{{CompatNo}} | {{CompatVersionUnknown}} |
crossOrigin {{experimental_inline}} |
{{WebKitBug(81438)}} | {{CompatGeckoDesktop("13")}} {{bug(696301)}} | {{CompatNo}} | {{CompatNo}} | {{WebKitBug(81438)}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
async |
{{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatVersionUnknown}} |
defer |
{{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatVersionUnknown}} |
crossOrigin {{experimental_inline}} |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Gecko-specific notes
Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling document.createElement("script")
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 async
property to false
on them.
Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.
See also
- HTML {{ HTMLElement("script") }} element
- HTML {{ HTMLElement("noscript") }} element
- {{domxref("document.currentScript")}}
- Web Workers (code snippets similar to scripts but executed in another global context)
- Ryan Grove's <script> and <link> node event compatibility chart