HTML 元素用于嵌入可执行代码或数据;这通常用于嵌入或引用 JaScript 代码。 元素还可以与其他语言一起使用,例如 WebGL 的 GLSL 着色器编程语言和 JSON 。
Attributes该元素包括 global attributes 。
async对于经典脚本,如果存在 async 属性,则经典脚本将在解析时并行获取,并在可用时立即进行评估。
对于 module scripts ,如果存在 async 属性,则脚本及其所有依赖项将在解析时并行获取,并在可用时立即进行评估。
警告:如果经典脚本中不存在 src 属性(即对于内联脚本),则不得使用此属性,在这种情况下它不会产生任何效果。
此属性可以消除阻止解析器的 JaScript ,在这种情况下,浏览器必须先加载并评估脚本,然后才能继续解析。在这种情况下, defer 具有类似的效果。
如果使用 defer 属性指定该属性,则该元素的行为将如同仅指定了 async 属性一样。
这是一个 boolean 属性:元素上存在 boolean 属性表示 true 值,而不存在该属性表示 false 值。
有关浏览器支持的说明,请参阅 Browser compatibility 。另请参阅 Async scripts for asm.js 。
attributionsrc Experimental指定您希望浏览器随脚本资源请求一起发送 Attribution-Reporting-Eligible 标头。在服务器端,这用于触发在响应中发送 Attribution-Reporting-Register-Source 或 Attribution-Reporting-Register-Trigger 标头,以分别注册基于 JaScript 的 attribution source 或 attribution trigger 。应发回哪个响应标头取决于触发注册的 Attribution-Reporting-Eligible 标头的值。
注意:或者,可以通过发送包含 attributionReporting 选项(直接在 fetch() 调用上设置,或在传递到 fetch() 调用的 Request 对象上设置)的 fetch() 请求,或者通过发送在请求对象上调用 setAttributionReporting() 的 XMLHttpRequest 来注册基于 JaScript 的归因源或触发器。
您可以设置此属性的两个版本:
布尔值,即仅 attributionsrc 名称。这指定您希望将 Attribution-Reporting-Eligible 标头发送到与 src 属性指向的同一服务器。当您在同一服务器上处理归因源或触发器注册时,这很好。注册归因触发器时,此属性是可选的,如果省略,将使用空字符串值。 包含一个或多个 URL 的值,例如: html 如果请求的资源不在您控制的服务器上,或者您只想处理在其他服务器上注册归因来源,则此功能非常有用。在这种情况下,您可以将一个或多个 URL 指定为 attributionsrc 的值。当发生资源请求时,除了资源来源之外, Attribution-Reporting-Eligible 标头还将发送到 attributionSrc 中指定的 URL。然后,这些 URL 可以根据需要使用 Attribution-Reporting-Register-Source 或 Attribution-Reporting-Register-Trigger 标头进行响应以完成注册。注意:指定多个 URL 意味着可以在同一功能上注册多个归因来源。例如,您可能要衡量不同的广告系列的成功程度,这需要针对不同的数据生成不同的报告。
请参阅 Attribution Reporting API 了解更多详细信息。
blocking Experimental此属性明确指示在获取脚本时应阻止某些操作。要阻止的操作必须是下面列出的以空格分隔的阻止标记列表。
render :屏幕内容的呈现被阻止。 crossorigin对于未通过标准 CORS 检查的脚本,常规 script 元素会将最少的信息传递给 window.onerror 。要允许对使用单独域的 static 媒体的站点进行错误记录,请使用此属性。请参阅 CORS settings attributes 以获取其有效参数的更详细的说明。
defer设置此 Boolean 属性是为了向浏览器指示该脚本将在文档被解析之后但在触发 DOMContentLoaded 事件之前执行。
具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发,直到脚本加载并完成评估。
警告:如果 src 属性不存在(即对于内联脚本),则不得使用此属性,在这种情况下它不会产生任何效果。
defer 属性对 module scripts 没有影响 — — 它们默认推迟。
具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。
此属性可以消除阻止解析器的 JaScript ,在这种情况下,浏览器必须先加载并评估脚本,然后才能继续解析。在这种情况下, async 具有类似的效果。
如果该属性与 async 属性一起指定,则该元素将表现得好像只指定了 async 属性。
fetchpriority提供获取外部脚本时使用的相对优先级的提示。允许的值:
high发出相对于其他外部脚本的高优先级提取信号。
low发出相对于其他外部脚本的低优先级提取信号。
auto默认:表示自动确定相对于其他外部脚本的获取优先级。
integrity此属性包含内联元数据,用户代理可以使用它来验证所获取的资源是否已交付且未发生意外操作。当未指定 src 属性时,不得指定此属性。请参阅 Subresource Integrity 。
nomodule设置此 Boolean 属性是为了表明该脚本不应在支持 ES modules 的浏览器中执行——实际上,这可用于向不支持模块化 JaScript 代码的老版本浏览器提供后备脚本。
nonce允许 script-src Content-Security-Policy 中的脚本的加密随机数(一次性使用的数字)。服务器每次传输策略时都必须生成唯一的随机数值。提供不可猜测的随机数至关重要,因为否则绕过资源的策略就很容易了。
referrerpolicy指示在获取脚本或脚本获取的资源时发送哪个 referrer :
no-referrer : Referer 标头将不会被发送。 no-referrer-when-downgrade :如果没有 TLS ( HTTPS ), Referer 标头将不会发送到 origin 。 origin :发送的引荐来源将仅限于引荐页面的来源:其 scheme 、 host 和 port 。 origin-when-cross-origin :发送到其他来源的引荐来源将仅限于方案、主机和端口。同一来源上的导航仍将包含路径。 same-origin :将为 same origin 发送引荐来源,但跨源请求将不包含引荐来源信息。 strict-origin :仅当协议安全级别保持不变(HTTPS→HTTPS)时才发送文档的来源作为引荐来源,但不要将其发送到不太安全的目的地(HTTPS→HTTP)。 strict-origin-when-cross-origin (默认):执行同源请求时发送完整的 URL,仅当协议安全级别保持不变(HTTPS→HTTPS)时发送源,并且不向不太安全的目的地发送标头(HTTPS→HTTP)。 unsafe-url :引荐来源将包括来源和路径(但不包括 fragment 、 password 或 username )。此值不安全,因为它会将来源和路径从受 TLS 保护的资源泄露到不安全的来源。注意:空字符串值 ( "" ) 既是默认值,也是不支持 referrerpolicy 时的后备值。如果 元素上未明确指定 referrerpolicy ,它将采用更高级别的引荐来源策略,即针对整个文档或域设置的策略。如果没有更高级别的策略,则空字符串被视为等同于 strict-origin-when-cross-origin 。
src此属性指定外部脚本的 URI;这可以用作在文档中直接嵌入脚本的替代方法。
type此属性指示所表示的脚本的类型。此属性的值将是以下之一:
未设置属性(默认)、空字符串或 JaScript MIME 类型表示脚本为 "classic script" ,包含 JaScript 代码。如果脚本引用 JaScript 代码,则鼓励作者省略该属性,而不是指定 MIME 类型。 JaScript MIME 类型为 listed in the IANA media types specification 。
importmap此值表示元素主体包含导入映射。导入映射是一个 JSON 对象,开发者可以使用它来控制浏览器在导入 JaScript modules 时如何解析模块说明符。
module此值导致代码被视为 JaScript 模块。脚本内容的处理被推迟。 charset 和 defer 属性不起作用。有关使用 module 的信息,请参阅我们的 JaScript modules 指南。与传统脚本不同,模块脚本需要使用 CORS 协议进行跨源获取。
speculationrules Experimental此值表示元素主体包含推测规则。推测规则采用 JSON 对象的形式,用于确定浏览器应预取或预渲染哪些资源。这是 Speculation Rules API 的一部分。
任何其他值嵌入的内容将被视为数据块,浏览器不会对其进行处理。开发人员必须使用非 JaScript MIME 类型的有效 MIME 类型来表示数据块。所有其他属性都将被忽略,包括 src 属性。
Deprecated attributes charset Deprecated如果存在,其值必须是 ASCII (不区分大小写)匹配 " utf-8 " 。无需指定 charset 属性,因为文档必须使用 UTF-8,并且 script 元素从文档继承其字符编码。
language Deprecated Non-standard与 type 属性类似,此属性标识正在使用的脚本语言。但是,与 type 属性不同的是,此属性的可能值从未标准化。应改用 type 属性。
Notes没有 async 、 defer 或 type="module" 属性的脚本以及没有 type="module" 属性的内联脚本会在浏览器继续解析页面之前立即被获取并执行。
脚本应使用 text/jascript MIME 类型,但浏览器比较宽容,只有当脚本使用图像类型 ( image/* )、视频类型 ( video/* )、音频类型 ( audio/* ) 或 text/csv 时,浏览器才会阻止它们。如果脚本被阻止,则会向元素发送 error 事件;否则,会发送 load 事件。
Examples Basic usage这些示例展示了如何使用 元素导入(外部)脚本。
html以下示例显示如何将(内联)脚本放入 元素内。
html alert("Hello World!"); 异步和延迟使用 async 属性加载的脚本将在获取脚本时下载脚本而不会阻止页面。但是,一旦下载完成,脚本就会执行,从而阻止页面呈现。这意味着在脚本执行完成之前,网页上的其余内容将无法处理并显示给用户。您无法保证脚本会按任何特定顺序运行。当页面中的脚本彼此独立运行且不依赖于页面上的其他脚本时,最好使用 async 。
使用 defer 属性加载的脚本将按照它们在页面上出现的顺序加载。它们在页面内容全部加载后才会运行,如果您的脚本依赖于 DOM(例如,它们修改页面上的一个或多个元素),这将非常有用。
以下是不同脚本加载方法的直观表示以及它们对您的页面的意义:
该图像来自 HTML spec ,根据 CC BY 4.0 许可条款复制并裁剪为缩小版本。
例如,如果您有以下脚本元素:
html您不能依赖脚本的加载顺序。 jquery.js 可能在 script2.js 和 script3.js 之前或之后加载,如果是这种情况,则这些脚本中依赖于 jquery 的任何函数都会产生错误,因为 jquery 不会在脚本运行时定义。
当您需要加载大量后台脚本,并且只想尽快将它们放置到位时,应该使用 async 。例如,也许您需要加载一些游戏数据文件,这些文件在游戏真正开始时会用到,但现在您只想继续显示游戏简介、标题和大厅,而不想让它们被脚本加载所阻碍。
使用 defer 属性加载的脚本(见下文)将按照它们在页面中出现的顺序运行,并在脚本和内容下载后立即执行它们:
html在第二个示例中,我们可以确定 jquery.js 将在 script2.js 和 script3.js 之前加载,而 script2.js 将在 script3.js 之前加载。它们在页面内容全部加载之前不会运行,如果您的脚本依赖于 DOM 到位(例如,它们修改页面上的一个或多个元素),这很有用。
To summarize:
async 和 defer 都指示浏览器在单独的线程中下载脚本,同时下载页面的其余部分(DOM 等),因此在获取过程中不会阻止页面加载。 具有 async 属性的脚本将在下载完成后立即执行。这会阻塞页面,并且不保证任何特定的执行顺序。 具有 defer 属性的脚本将按其所在的顺序加载,并且只有在所有内容加载完成后才会执行。 如果您的脚本应该立即运行并且它们没有任何依赖关系,那么请使用 async 。 如果您的脚本需要等待解析并且依赖于其他脚本和/或 DOM,请使用 defer 加载它们并按照您希望浏览器执行的顺序放置它们相应的 元素。 Module fallback支持 type 属性的 module 值的浏览器会忽略任何具有 nomodule 属性的脚本。这样一来,您就可以使用模块脚本,同时为不支持的浏览器提供标有 nomodule 的后备脚本。
html 使用 importmap 导入模块在脚本中导入模块时,如果您不使用 type=importmap 功能,则必须使用模块说明符(绝对 URL 或相对 URL)导入每个模块。在下面的示例中,第一个模块说明符 ( "./shapes/square.js" ) 相对于文档的基本 URL 进行解析,而第二个模块说明符是绝对 URL。
js import { name as squareName, draw } from "./shapes/square.js"; import { name as circleName } from "https://example.com/shapes/circle.js";导入映射允许您提供一个映射,如果匹配,该映射可以替换模块说明符中的文本。下面的导入映射定义了键 square 和 circle ,它们可以用作上面显示的模块说明符的别名。
html { "imports": { "square": "./shapes/square.js", "circle": "https://example.com/shapes/circle.js" } }这使我们能够使用模块说明符中的名称(而不是绝对或相对 URL)来导入模块。
js import { name as squareName, draw } from "square"; import { name as circleName } from "circle";有关使用导入映射可以执行的操作的更多示例,请参阅 JaScript 模块指南中的 Importing modules using import maps 部分。
在 HTML 中嵌入数据您还可以使用 元素通过在 type 属性中指定有效的非 JaScript MIME 类型,将数据嵌入到具有服务器端呈现的 HTML 中。
html