当前位置：文江博客知识库简体中文文档 Web HTML Element Script

<script> - HTML（超文本标记语言）编辑

HTML <script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。

内容分类	元数据内容, 流式元素, 短语元素.
可用内容	动态脚本，如 `text/javascript`.
标签省略	不允许，开始标签和结束标签都不能省略。
可用父元素	一些元素可以接受元数据内容, 或则是一些元素可以接受短语元素。
隐含的 ARIA 角色	没有对应的角色
允许的 ARIA 角色	不允许任何角色
DOM接口	`HTMLScriptElement`

属性

该元素包含全局属性。

async HTML5

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

关于浏览器支持请参见浏览器兼容性。另可参见文章asm.js的异步脚本。

crossorigin

那些没有通过标准CORS检查的正常script 元素传递最少的信息到 window.onerror。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。参考 CORS 设置属性了解对有效参数的更具描述性的解释。

<script src="" crossorigin="anonymous"></script>

defer

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。

有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。 defer 属性对模块脚本没有作用 —— 他们默认 defer。

integrity

包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据。参见 Subresource Integrity。

nomodule

这个布尔属性被设置来标明这个脚本在支持 ES2015 modules 的浏览器中不执行。 — 实际上，这可用于在不支持模块化JavaScript的旧浏览器中提供回退脚本。

nonce

A cryptographic nonce (number used once) to whitelist inline scripts in a script-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.

referrerpolicy

Indicates which referrer to send when fetching the script, or resources fetched by the script:

no-referrer: The Referer header will not be sent.
no-referrer-when-downgrade (default): The Referer header will not be sent to origins without TLS (HTTPS).
origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).
strict-origin-when-cross-origin: Send a full URL when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).
unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

Note: An empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported. If referrerpolicy is not explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to no-referrer-when-downgrade.

src

这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。

type

该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript。

如果MIME类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。

如果type属性为module，代码会被当作JavaScript模块。请参见ES6 in Depth: Modules

在Firefox中可以通过定义type=application/javascript;version=1.8来使用如let声明这类的JS高版本中的先进特性。但请注意这是个非标准功能，其他浏览器，特别是基于Chrome的浏览器可能会不支持。

关于如何引入特殊编程语言，请参见这篇文章。

text

和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性在节点插入到DOM之后，此属性被解析为可执行代码。

Deprecated attributes

charset

如果存在，值必须和“utf-8”不区分大小写的匹配。当然声明 charset 是没有必要的，因为页面文档必须使用UTF-8，而 script 元素会从页面文档中继承这个属性。

language

和type属性类似，这个属性定义脚本使用的语言。但是与type不同的是，这个属性的可能值从未被标准化过。请用type属性代替这个属性。

示例

基本用法

下面这些示例说明了如何在HTML4和HTML5中通过使用<script>元素来导入脚本。

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">

<!-- HTML5 -->
<script src="javascript.js"></script>

Module fallback

Browsers that support the module value for the type attribute ignore any script with a nomodule attribute. That enables you to use module scripts while also providing nomodule-marked fallback scripts for non-supporting browsers.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

规范

内容分类

规范	状态	备注
HTML Living Standard <script>	Living Standard	Adds the module type
HTML5 <script>	Recommendation
HTML 4.01 Specification <script>	Recommendation
Subresource Integrity <script>	Recommendation	Adds the integrity attribute.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)^[2]	(Yes)	(Yes)	(Yes)
async attribute	(Yes)^[1]	(Yes)	3.6 (1.9.2)^[1]	10^[1]	15^[1]	(Yes)^[1]
defer attribute	(Yes)	(Yes)	3.5 (1.9.1)^[6]	4^[3] 10	未实现	(Yes)
crossorigin attribute	30.0	(Yes)	13 (13)	未实现	12.50	(Yes)^[4]
integrity attribute	45.0	未实现	43 (43)			未实现^[5]

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	(Yes)	(Yes)	(Yes)	1.0 (1.0)^[2]	(Yes)	(Yes)	(Yes)	(Yes)
async attribute	(Yes)^[1]	(Yes)^[1]	(Yes)	1.0 (1.0)^[1]	未实现^[1]	?^[1]	(Yes)^[1]	(Yes)^[1]
defer attribute	(Yes)	(Yes)	(Yes)	1.0 (1.0)	未实现	?	(Yes)	(Yes)
integrity attribute	未实现	45.0	未实现	43 (43)				45.0

[1] In older browsers that don't support the async attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the async DOM property defaults to true for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the document.createElement("script").async evaluates to true (such as Firefox 4.0), set .async=false on the scripts you want to maintain order. Never call document.write() from an async script. In Gecko 1.9.2, calling document.write() has an unpredictable effect. In Gecko 2.0, calling document.write() from an async script has no effect (other than printing a warning to the error console).

[2] Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), 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 .async=false on them.

Also, <script> elements inside <iframe>, <noembed> and <noframes> elements are now executed, for the same reasons.

[3] In versions prior to Internet Explorer 10 Trident implemented <script> by a proprietary specification. Since version 10 it conforms to the W3C specification.

[4] The crossorigin attribute was implemented in WebKit in WebKit bug 81438.

[5] WebKit bug 148363 tracks WebKit implementation of Subresource Integrity (which includes the integrity attribute).

[6] 从 Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0) 开始，在没有 src 属性的脚本标签上的 defer 属性会被忽略。但是在 Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) 中，如果定义了 defer 属性，即使内嵌的脚本也会被延迟执行。