<script>
HTML <script>
元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script>
元素也能在其他语言中使用,比如 WebGL 的 GLSL 着色器语言。
内容分类 | 元数据内容, 流式元素, 短语元素. |
---|---|
可用内容 | 动态脚本,如 text/javascript . |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
可用父元素 | 一些元素可以接受元数据内容,或者是一些元素可以接受短语元素。 |
隐含的 ARIA 角色 | 没有对应的角色 |
允许的 ARIA 角色 | 不允许任何角色 |
DOM 接口 | HTMLScriptElement |
属性
该元素包含全局属性。
async
-
对于普通脚本,如果存在
async
属性,那么普通脚本会被并行请求,并尽快解析和执行。 对于模块脚本,如果存在async
属性,那么脚本及其所有依赖都会在延缓队列中执行,因此它们会被并行请求,并尽快解析和执行。 该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本,之后才能继续解析。defer
在这一点上也有类似的作用。 这是个布尔属性:布尔属性的存在意味着 true 值,布尔属性的缺失意味着 false 值。 关于浏览器支持请参见浏览器兼容性。另可参见文章asm.js 的异步脚本。 crossorigin
-
那些没有通过标准CORS (en-US)检查的正常
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 (en-US). 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
: TheReferer
header will not be sent.no-referrer-when-downgrade
(default): TheReferer
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 (en-US).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 ifreferrerpolicy
is not supported. Ifreferrerpolicy
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 tono-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
示例
基本用法
下面这些示例说明了如何在 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>
规范
Specification |
---|
HTML Standard # the-script-element |
浏览器兼容性
BCD tables only load in the browser