HTML
<script>
element
is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
<script>
element can also be used with other languages, such as
WebGL
's GLSL shader programming language and
JSON
.
| 内容类别 | 元数据内容 , 流内容 , 措词内容 . |
|---|---|
| 准许内容 |
Dynamic script such as
text/javascript
.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts metadata content , or any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLScriptElement
|
此元素包括 全局属性 .
async
HTML5
For classic scripts, if the
async
attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
For
module scripts
, if the
async
attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.
This attribute allows the elimination of
parser-blocking JavaScript
where the browser would have to load and evaluate scripts before continuing to parse.
defer
has a similar effect in this case.
This is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
见 浏览器兼容性 for notes on browser support. See also Async scripts for asm.js .
crossorigin
script
elements pass minimal information to the
window.onerror
for scripts which do not pass the standard
CORS
checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See
CORS 设置属性
for a more descriptive explanation of its valid arguments.
defer
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing
DOMContentLoaded
.
Scripts with the
defer
attribute will prevent the
DOMContentLoaded
event from firing until the script has loaded and finished evaluating.
This attribute must not be used if the
src
attribute is absent (i.e. for inline scripts), in this case it would have no effect.
defer
attribute has no effect on
module scripts
— they defer by default.
Scripts with the
defer
attribute will execute in the order in which they appear in the document.
This attribute allows the elimination of
parser-blocking JavaScript
where the browser would have to load and evaluate scripts before continuing to parse.
async
has a similar effect in this case.
integrity
nomodule
nonce
referrerpolicy
no-referrer
：
Referer
header will not be sent.
no-referrer-when-downgrade
(default): The
Referer
header will not be sent to
origin
s without
TLS
(
HTTPS
).
origin
: The sent referrer will be limited to the origin of the referring page: its
scheme
,
host
，和
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
，或
username
).
This value is unsafe
, because it leaks origins and paths from TLS-protected resources to insecure origins.
注意
: 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
This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.
type
This attribute indicates the type of script represented. The value of this attribute will be in one of the following categories:
src
attribute) code. JavaScript MIME types are
listed in the specification
.
模块
:
Causes the code to be treated as a JavaScript module. The processing of the script contents is not affected by the
charset
and
defer
attributes. For information on using
模块
, see our
JavaScript 模块
guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.
src
attribute will be ignored.
charset
utf-8
". It’s unnecessary to specify the
charset
attribute, because documents must use UTF-8, and the
script
element inherits its character encoding from the document.
语言
type
attribute, this attribute identifies the scripting language in use. Unlike the
type
attribute, however, this attribute’s possible values were never standardized. The
type
属性应该被使用以取而代之。
Scripts without
async
,
defer
or
type="module"
attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.
The script should be served with the
text/javascript
MIME type, but browsers are lenient and only block them if the script is served with an image type (
image/*
); a video type (
video/*
); an audio (
audio/*
) type; or
text/csv
. If the script is blocked, an
error
is sent to the element, if not a
load
event is sent.
These examples show how to import (an external) script using the
<script>
元素。
<script src="javascript.js"></script>
And the following examples show how to put (an inline) script inside the
<script>
元素。
<script>
alert("Hello World!");
</script>
Browsers that support the
模块
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.js"></script> <script nomodule src="fallback.js"></script>
还可以使用
<script>
element to embed data in HTML with server-side rendering by specifying a valid non-JavaScript MIME type in the
type
属性。
<!-- Generated by the server -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>
<!-- Static -->
<script>
const userInfo = JSON.parse(document.getElementById("data").text);
console.log("User information: %o", userInfo);
</script>
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
script
|
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 完整支持 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 完整支持 30 | Edge 完整支持 ≤18 | Firefox 完整支持 13 | IE 不支持 No | Opera 完整支持 12 |
Safari
完整支持
Yes
注意事项
|
WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 14 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完整支持 Yes |
defer
|
Chrome
完整支持
Yes
注意事项
|
Edge 完整支持 12 |
Firefox
完整支持
3.5
注意事项
|
IE
完整支持
10
注意事项
|
Opera
完整支持
Yes
注意事项
|
Safari 完整支持 Yes |
WebView Android
完整支持
Yes
注意事项
|
Chrome Android
完整支持
Yes
注意事项
|
Firefox Android 完整支持 4 |
Opera Android
完整支持
Yes
注意事项
|
Safari iOS 完整支持 Yes |
Samsung Internet Android
完整支持
Yes
注意事项
|
integrity
|
Chrome 完整支持 45 | Edge 部分支持 17 | Firefox 完整支持 43 | IE 不支持 No | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 45 | Chrome Android 完整支持 45 | Firefox Android 完整支持 43 | Opera Android ? | Safari iOS 不支持 No | Samsung Internet Android 完整支持 5.0 |
语言
弃用
非标
|
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 完整支持 61 | Edge 完整支持 16 |
Firefox
完整支持
60
|
IE 不支持 No | Opera 完整支持 48 | Safari 完整支持 11 | WebView Android 完整支持 61 | Chrome Android 完整支持 61 |
Firefox Android
完整支持
60
|
Opera Android 完整支持 45 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 8.0 |
referrerPolicy
|
Chrome 完整支持 70 | Edge 完整支持 ≤79 | Firefox 完整支持 65 | IE 不支持 No | Opera 完整支持 Yes | Safari 不支持 No | WebView Android 完整支持 70 | Chrome Android 完整支持 70 | Firefox Android 完整支持 65 | Opera Android ? | 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 |
type.module
|
Chrome 完整支持 61 | Edge 完整支持 16 |
Firefox
完整支持
60
|
IE 不支持 No | Opera 完整支持 48 | Safari 完整支持 10.1 | WebView Android 完整支持 61 | Chrome Android 完整支持 61 |
Firefox Android
完整支持
60
|
Opera Android 完整支持 45 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 8.0 |
type
：
version
参数为
type
属性
非标
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 ? — 59 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 ? — 59 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
部分支持
不支持
兼容性未知
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
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 Firefox. In Firefox 4, the
async
DOM property defaults to
true
for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.
To request script-inserted external scripts be executed in the insertion order in browsers where the
document.createElement("script").async
评估为
true
(such as Firefox 4), set
async="false"
on the scripts you want to maintain order.
Never call
document.write()
from an async script. In Firefox 3.6, calling
document.write()
has an unpredictable effect. In Firefox 4, calling
document.write()
from an async script has no effect (other than printing a warning to the error console).
document.currentScript
<script>
and
<link>
node event compatibility chart
async
and
defer
<canvas>
<noscript>
<script>