HTMLScriptElement

HTML <script> elements expose the HTMLScriptElement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited HTMLElement interface).

JavaScript files should be served with the application/javascript MIME type , but browsers are lenient and block them only if the script is served with an image type ( image/* ), video type ( video/* ), audio type ( audio/* ),或 text/csv . If the script is blocked, its element receives an error event; otherwise, it receives a load 事件。

特性

Inherits properties from its parent, HTMLElement .

HTMLScriptElement.type
DOMString representing the MIME type of the script. It reflects the type 属性。
HTMLScriptElement.src
DOMString representing the URL of an external script. It reflects the src 属性。
HTMLScriptElement.event
DOMString ; an obsolete way of registering event handlers on elements in an HTML document.
HTMLScriptElement.charset
DOMString representing the character encoding of an external script. It reflects the charset 属性。
HTMLScriptElement.async
HTMLScriptElement.defer

async and defer attributes are Boolean attributes that control how the script should be executed. defer and async attributes must not be specified if the src attribute is absent.

There are three possible execution modes:

  1. async attribute is present, then the script will be executed asynchronously as soon as it downloads.
  2. async attribute is absent but the defer attribute is present, then the script is executed when the page has finished parsing .
  3. If neither attribute is present, then the script is fetched and executed immediately, blocking further parsing of the page.

defer attribute may be specified with the async attribute, so legacy browsers that only support defer (and not async ) fall back to the defer behavior instead of the default blocking behavior.

注意: The exact processing details for these attributes are complex, involving many different aspects of HTML, and therefore are scattered throughout the specification. These algorithms describe the core ideas, but they rely on the parsing rules for <script> start and end tags in HTML, in foreign content ,和 in XML ; the rules for the document.write() method; the handling of scripting ; and so on.
HTMLScriptElement.crossOrigin
DOMString reflecting the CORS setting for the script element. For scripts from other origins , this controls if error information will be exposed.
HTMLScriptElement.text

DOMString that joins and returns the contents of all Text nodes inside the <script> element (ignoring other nodes like comments) in tree order. On setting, it acts the same way as the textContent IDL attribute.

注意: When inserted using the document.write() method, <script> elements execute (typically synchronously), but when inserted using innerHTML or outerHTML , they do not execute at all.
HTMLScriptElement.noModule
Boolean that if true, stops the script's execution in browsers that support ES2015 modules — used to run fallback scripts in older browsers that do not support JavaScript modules.
HTMLScriptElement.referrerPolicy
DOMString that reflects the referrerpolicy HTML attribute indicating which referrer to use when fetching the script, and fetches done by that script.

方法

No specific methods; inherits methods from its parent, HTMLElement .

范例

Dynamically importing scripts

Let's create a function that imports new scripts within a document creating a <script> node immediately before the <script> that hosts the following code (through document.currentScript ). These scripts will be asynchronously executed. For more details, see the defer and async 特性。

function loadError(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
}
function prefixScript(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
  newScript.src = url;
}
					

This next function, instead of prepending the new scripts immediately before the document.currentScript element, appends them as children of the <head> tag.

function loadError(oError) {
  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
}
function affixScriptToHead(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.head.appendChild(newScript);
  newScript.src = url;
}
					

Sample usage:

affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });
					

规范

规范 状态 Comment
HTML Living Standard
The definition of 'HTMLScriptElement' in that specification.
实时标准
HTML 5.1
The definition of 'HTMLScriptElement' in that specification.
Recommendation
HTML5
The definition of 'HTMLScriptElement' in that specification.
Recommendation The following properties are now obsolete: htmlFor, .
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'HTMLScriptElement' in that specification.
Obsolete No change from Document Object Model (DOM) Level 1 Specification .
Document Object Model (DOM) Level 1 Specification
The definition of 'HTMLScriptElement' in that specification.
Obsolete 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
HTMLScriptElement Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
async Chrome Yes Edge 12 Firefox 3.6 IE 10 Opera No Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
charset Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
crossOrigin
Chrome 1 Edge 14 Firefox 13 IE No Opera No Safari 4 WebView Android Yes Chrome Android Yes Firefox Android 14 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
defer Chrome Yes Edge 12 Firefox 3.5 IE 10
10
不支持 4 — 10
Non-standard implementation
Opera No Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
event
弃用
Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
htmlFor
弃用
Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
noModule
Chrome Yes Edge 16 Firefox 60
60
不支持 55 — 60
Disabled
Disabled From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android Yes Chrome Android Yes Firefox Android 60
60
不支持 55 — 60
Disabled
Disabled From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
referrerPolicy Chrome 70 Edge ≤79 Firefox 65 IE No Opera Yes Safari No WebView Android 70 Chrome Android 70 Firefox Android 65 Opera Android Yes Safari iOS No Samsung Internet Android 10.0
src Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
text Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
type Chrome 1 Edge 12 Firefox 1 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅

  1. HTMLScriptElement
  2. 特性
    1. referrerPolicy
  3. 继承:
    1. HTMLElement
    2. Element
    3. Node
    4. EventTarget
  4. Related pages for HTML DOM
    1. BeforeUnloadEvent
    2. DOMStringMap
    3. ErrorEvent
    4. GlobalEventHandlers
    5. HTMLAnchorElement
    6. HTMLAreaElement
    7. HTMLAudioElement
    8. HTMLBRElement
    9. HTMLBaseElement
    10. HTMLBaseFontElement
    11. HTMLBodyElement
    12. HTMLButtonElement
    13. HTMLCanvasElement
    14. HTMLContentElement
    15. HTMLDListElement
    16. HTMLDataElement
    17. HTMLDataListElement
    18. HTMLDialogElement
    19. HTMLDivElement
    20. HTMLDocument
    21. HTMLElement
    22. HTMLEmbedElement
    23. HTMLFieldSetElement
    24. HTMLFormControlsCollection
    25. HTMLFormElement
    26. HTMLFrameSetElement
    27. HTMLHRElement
    28. HTMLHeadElement
    29. HTMLHeadingElement
    30. HTMLHtmlElement
    31. HTMLIFrameElement
    32. HTMLImageElement
    33. HTMLInputElement
    34. HTMLIsIndexElement
    35. HTMLKeygenElement
    36. HTMLLIElement
    37. HTMLLabelElement
    38. HTMLLegendElement
    39. HTMLLinkElement
    40. HTMLMapElement
    41. HTMLMediaElement
    42. HTMLMetaElement
    43. HTMLMeterElement
    44. HTMLModElement
    45. HTMLOListElement
    46. HTMLObjectElement
    47. HTMLOptGroupElement
    48. HTMLOptionElement
    49. HTMLOptionsCollection
    50. HTMLOutputElement
    51. HTMLParagraphElement
    52. HTMLParamElement
    53. HTMLPictureElement
    54. HTMLPreElement
    55. HTMLProgressElement
    56. HTMLQuoteElement
    57. HTMLSelectElement
    58. HTMLShadowElement
    59. HTMLSourceElement
    60. HTMLSpanElement
    61. HTMLStyleElement
    62. HTMLTableCaptionElement
    63. HTMLTableCellElement
    64. HTMLTableColElement
    65. HTMLTableDataCellElement
    66. HTMLTableElement
    67. HTMLTableHeaderCellElement
    68. HTMLTableRowElement
    69. HTMLTableSectionElement
    70. HTMLTemplateElement
    71. HTMLTextAreaElement
    72. HTMLTimeElement
    73. HTMLTitleElement
    74. HTMLTrackElement
    75. HTMLUListElement
    76. HTMLUnknownElement
    77. HTMLVideoElement
    78. HashChangeEvent
    79. History
    80. ImageData
    81. Location
    82. MessageChannel
    83. MessageEvent
    84. MessagePort
    85. Navigator
    86. NavigatorGeolocation
    87. NavigatorID
    88. NavigatorLanguage
    89. NavigatorOnLine
    90. NavigatorPlugins
    91. PageTransitionEvent
    92. Plugin
    93. PluginArray
    94. PopStateEvent
    95. PortCollection
    96. PromiseRejectionEvent
    97. RadioNodeList
    98. Transferable
    99. ValidityState
    100. Window
    101. WindowBase64
    102. WindowEventHandlers
    103. WindowTimers