HTML <script> 元素

HTML <script> 元素用于嵌入或引用可执行代码；它通常用于嵌入或引用 JavaScript 代码。 <script> 元素也可以与其他语言一起使用，例如 WebGL的 GLSL 着色器编程语言。

特性

内容类别	元数据内容，流式内容，短语内容。
允许的内容	动态脚本，例如 text/javascript。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受 元数据内容 或 短语内容 的元素。
允许的 ARIA 角色	无
DOM 接口	HTMLScriptElement

属性

该元素包含了全局属性。

async HTML5

一个布尔属性，指示浏览器应尽可能异步加载脚本。

如果缺少 src 属性（即内联脚本），则不能使用该属性。如果它包括在这种情况下它将没有任何效果。

浏览器通常假设最糟糕的情况并在 HTML 解析期间同步加载脚本（即 async="false" ）。

动态插入的脚本（使用 document.createElement()）默认情况下异步加载，因此要打开同步加载（即脚本按插入顺序加载）设置 async="false"。

有关浏览器支持的说明，请参阅浏览器兼容性。另请参见 asm.js 的异步脚本。

crossorigin

对于未通过标准 CORS 检查的脚本，正常的 script 元素将最小信息传递给 window.onerror。要允许对使用静态媒体的单独域的站点进行错误记录，请使用该属性。有关其有效参数的更具描述性的说明，请参阅 CORS 设置属性。

defer

一个布尔属性，向浏览器指示在解析文档之后，但在触发 DOMContentLoaded 之前要执行该脚本。

带有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成执行。

如果缺少 src 属性（即对于内联脚本），则不能使用该属性，在这种情况下，它将不起作用。

要为动态插入的脚本实现类似的效果，请使用 async="false"。具有 defer 属性的脚本将按它们在文档中出现的顺序执行。

integrity

该属性包含内联元数据，用户代理可以使用该元数据来验证已提供的已获取资源是否没有意外操作。请参阅 Subresource Integrity。

nomodule

该布尔属性设置为指示不应在支持 ES2015 模块的浏览器中执行脚本 - 实际上，这可以用于为不支持模块化 JavaScript 代码的旧浏览器提供后备脚本。

nonce

在 script-src Content-Security-Policy 中列入白名单内联脚本的加密随机数（一次使用的数字）。每次发送策略时，服务器都必须生成唯一的 nonce 值。

referrerpolicy

指示在获取脚本或脚本获取资源时，要发送的 referrer 头：

• no-referrer：将不发送 Referer 头。
• no-referrer-when-downgrade：如果源站不是 TLS（HTTPS）时，不会发送 Referer 头。如果没有指定任何策略，则这是用户代理的默认行为。
• origin：发送 Referer 来源将仅限于引用页面的来源：包括页面的协议、主机和端口。
• origin-when-cross-origin：导航到其他源时，将限制所包含数据只有协议，主机和端口，而导航到相同的源将包含来源者的完整路径。
• same-origin：在同源的请求下，将发送 referrer，但跨域请求将不包含 referrer 信息。
• strict-origin：当目的页面是安全的（HTTPS->HTTPS）才发送文档的 origin 作为 referrer，如果是相比不安全则不发送（HTTPS->HTTP）。
• strict-origin-when-cross-origin：同源的请求下发送完整的 URL，当目的页面是安全的（HTTPS->HTTPS）才发送文档的 origin，如果目的页面相比不安全（HTTPS->HTTP）则不发送任何头。
• unsafe-url：Referer 头将包含源站和路径，但不包括片段（fragment），密码或用户名。该值是不安全的，因为它可能会将受 TLS 保护的资源中的源和路径，泄露到不安全的源。

注意：空字符串值（""）是默认值，也是 referrerpolicy 不支持时的回退值。如果 <script> 元素没有明确指定 referrerpolicy ，它将采用更高级别的引用者策略，即整个文档或域中的一个。如果没有更高级别的策略，则将空字符串视为等同于 no-referrer-when-downgrade。

src

该属性指定外部脚本的 URI ，这可以用作直接在文档中嵌入脚本的替代方法。

如果 script 元素指定了 src 属性，则它的标记内不应嵌入脚本。

text

与 textContent 属性一样，该属性设置元素的文本内容。但是，与 textContent 属性不同，在将节点插入 DOM 之后，该属性将被评估为可执行代码。

type

该属性指示表示的脚本类型。该属性的值将属于以下类别之一：

• 省略或 JavaScript MIME 类型： 对于符合 HTML5 的浏览器，这表示脚本是 JavaScript。 HTML5 规范敦促作者省略属性，而不是提供冗余的 MIME 类型。在早期的浏览器中，这确定了嵌入或导入（通过 src 属性）代码的脚本语言。规范中列出了 JavaScript MIME 类型。
• module： 对于符合 HTML5 的浏览器，代码被视为 JavaScript 模块。脚本内容的处理不受 charset 和 defer 属性的影响。有关使用 module 的信息，请参阅 ES6 in Depth：Modules。使用 module 关键字时，代码可能会有不同的行为。
• 任何其他值： 嵌入的内容被视为不会被浏览器处理的数据块。开发人员必须使用不是 JavaScript MIME 类型的有效 MIME 类型来表示数据块。src 属性将被忽略。

注意： 在 Firefox 中你可以通过在 type 属性中包含一个非标准的 version 参数来指定 <script> 元素中包含的 JavaScript 版本 - 例如 type="text/javascript;version=1.8" 。这已在 Firefox 59 中删除（请参阅 Mozilla bug 1428745）。

废弃的属性

charset

如果存在，其值必须是 “utf-8”（ASCII，不区分大小写）。没有必要指定 charset 属性，因为文档必须使用 UTF-8，而 script 元素从文档继承其字符编码。

language

与 type 属性一样，该属性标识正在使用的脚本语言。然而，与 type 属性不同，该属性的可能值从未标准化。应该使用 type 属性。

注意

不带 async，defer 或 type="module" 属性以及内联脚本的脚本，被获取后，在浏览器继续解析页面之前立即执行。

脚本的 MIME 类型应该是 text/javascript，但浏览器的要求是宽松的，只有在脚本是图像类型（image/*），视频类型（video/*），音频类型（audio/*）或 text/csv 时才会阻止它们。如果脚本被阻止，则会向该元素发送 error 事件，如果没有则发送 load 事件。

更多实例

基本用法

该实例显示了如何使用 HTML4 和 HTML5 中的 <script> 元素导入脚本。

<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

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

模块回退

支持 type 属性为 module 值的浏览器会忽略任何带有 nomodule 属性的脚本。这使您可以使用模块脚本，同时还为不支持的浏览器提供 nomodule 标记的回退脚本。

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

规范

规范	状态	备注
HTML Living Standard	现行的标准	删除了 charset 属性
Unknown	Unknown	删除了 charset 属性
HTML 5.2	编者的草案	添加了 type module 值
HTML 5.1	推荐	-
HTML5	推荐	-
HTML 4.01 Specification	推荐	-
Subresource Integrity	推荐	添加了 integrity 属性。

桌面浏览器兼容性

移动浏览器兼容性

1. 从 Firefox 4 开始，插入通过调用 document.createElement("script") 创建的 <script> 元素不再强制按插入顺序执行。该更改使 Firefox 可以正确遵守规范。要使插入脚本的外部脚本按其插入顺序执行，请在它们上设置 .async=false。

2. crossorigin 属性在 WebKit 中是通过 WebKit bug 81438 实现的 。

3. 从 Firefox 3.6 开始，在没有 src 属性的脚本上会忽略 defer 属性。但是，在 Firefox 3.5 中，如果设置了 defer 属性，则会延迟内联脚本。

4. 在 Internet Explorer 10 之前的版本中，它通过专有规范实现 defer。从版本 10 开始，它符合 W3C 规范。

5. WebKit bug 148363 跟踪了子资源完整性的 WebKit 实现（其中包括了 integrity 属性）。

兼容性说明

在不支持 async 属性的旧浏览器中，插入解析器的脚本会阻塞解析器；通过脚本插入的脚本在 IE 和 WebKit 中异步执行，但在 Opera 和 Firefox 4 之前的版本中会同步执行。在 Firefox 4 中，脚本创建的脚本的 async DOM 属性值默认为 true，因此其默认行为与 IE 和 WebKit 的行为相匹配。

在 document.createElement("script").async 默认为 true 的浏览器（例如 Firefox 4）中，如果想要脚本插入的外部脚本在浏览器中以插入的顺序执行，请将你要保证顺序的脚本设置为 async="false"。

永远不要在异步脚本中调用 document.write()。在 Firefox 3.6 中，调用 document.write() 具有不可预测的效果。在 Firefox 4 中，从异步脚本调用 document.write() 无效（除了向错误控制台打印警告）。

相关链接

• document.currentScript
• Ryan Grove 的 <script> 和 <link> 节点事件兼容性图表
• Flavio Copes 关于有效加载 JavaScript 并解释 async 和 defer 之间差异的文章