<script>:script元素

基线 广泛可用

此功能已得到很好的建立,可在许多设备和浏览器版本中使用。从那时起,它就可以跨浏览器使用了 2015年7月.

这个<脚本> HTML格式元素用于嵌入可执行代码或数据;这通常用于嵌入或引用JavaScript代码。这个<脚本>元素还可以与其他语言一起使用,例如网络GL的GLSL着色器编程语言和JSON格式.

属性

此元素包括全局属性.

异步

对于经典脚本,如果异步属性,则经典脚本将在解析时并行获取,并在可用时立即进行评估。

对于模块脚本,如果异步属性存在时,脚本及其所有依赖项将在解析时并行获取,并在可用时立即进行评估。

警告:如果型钢混凝土对于经典脚本,该属性不存在(即对于内联脚本),在这种情况下,它将不起作用。

此属性允许消除解析器阻塞JavaScript浏览器在继续解析之前必须加载和评估脚本。推迟在这种情况下也有类似的效果。

如果使用推迟属性时,元素的行为就像只有异步属性。

这是一个布尔属性:元素上存在布尔属性表示真值,缺少属性表示假值。

请参见浏览器兼容性有关浏览器支持的注释。另请参见asm.js的异步脚本.

属性rc 实验

指定希望浏览器发送归属-报告-合格标头以及脚本资源请求。在服务器端,这用于触发发送属性-报告-注册表-源属性-报告-寄存器-触发器响应中的标头,以注册基于JavaScript的归因来源归因触发器分别是。应发回哪个响应标头取决于归属-报告-合格触发注册的标头。

注:或者,可以通过发送获取()请求包含属性报告选项(直接在获取()调用或调用请求对象传入获取()呼叫),或发送XMLHttp请求具有设置属性报告()对请求对象调用。

可以设置此属性的两个版本:

  • 布尔值,即仅属性rc名称。这指定您希望归属-报告-合格发送到与型钢混凝土属性指向。当您在同一服务器上处理属性源或触发器注册时,这很好。注册属性触发器时,此属性是可选的,如果省略,将使用空字符串值。
  • 包含一个或多个URL的值,例如:
    html格式
    <脚本src=“myscript.js”attributionsrc=“https://a.example/register-source(https://a.example/register-source) https://b.example/register-source网址“></script>
    如果请求的资源不在您控制的服务器上,或者您只想在不同的服务器上注册属性源,那么这将非常有用。在这种情况下,可以将一个或多个URL指定为属性rc。当资源请求发生时归属-报告-合格标头将发送到中指定的URL属性Src除了资源来源之外。然后,这些URL可以使用属性-报告-注册表-源属性-报告-寄存器-触发器标题以完成注册。

    注:指定多个URL意味着可以在同一功能上注册多个归因源。例如,您可能有不同的活动,您正在尝试衡量其成功与否,其中涉及针对不同数据生成不同的报告。

请参阅归因报告API了解更多详细信息。

舞台调度 实验

此属性明确指示在获取脚本时应阻止某些操作。要阻止的操作必须是下面列出的以空格分隔的阻止标记列表。

  • 提供:屏幕上的内容呈现被阻止。
交叉原点

正常脚本元素向window.onerror窗口错误对于未通过标准的脚本CORS公司检查。要允许为静态媒体使用单独域的站点记录错误,请使用此属性。请参见CORS设置属性以获得对其有效参数的更具描述性的解释。

推迟

设置此布尔属性是为了向浏览器指示脚本将在解析文档后但在触发之前执行DOM内容已加载事件。

脚本推迟属性将阻止DOM内容已加载事件,直到脚本加载并完成计算。

警告:如果型钢混凝土属性不存在(即对于内联脚本),在这种情况下,它将不起作用。

这个推迟属性对没有影响模块脚本-他们默认延期。

脚本推迟属性将按照它们在文档中出现的顺序执行。

此属性允许消除解析器阻塞JavaScript浏览器在继续解析之前必须加载和评估脚本。异步在这种情况下也有类似的效果。

如果使用异步属性时,元素的行为就像只有异步属性。

获取优先级

提供获取外部脚本时要使用的相对优先级的提示。允许的值:

高的

表示相对于其他外部脚本的高优先级获取。

低的

表示相对于其他外部脚本的低优先级获取。

汽车

默认值:表示自动确定相对于其他外部脚本的获取优先级。

完整性

此属性包含内联元数据,用户代理可以使用该元数据验证是否在未进行意外操作的情况下交付了提取的资源。型钢混凝土未指定属性。请参见子资源完整性.

诺模架

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

现时

密码nonce(使用一次的数字),用于允许script-src内容安全策略。服务器每次传输策略时必须生成唯一的nonce值。提供一个不能被猜测为绕过资源策略的nonce是至关重要的。

参考政策

指示哪个推荐人获取脚本或脚本获取的资源时发送:

  • 无继电器:该推荐人不会发送标头。
  • 降级时无重传:该推荐人标题将不会发送到起源s不带TLS公司(HTTPS协议).
  • 起源:发送的推荐人将限于引用页面的来源:其方案,主办,以及港口.
  • 原始-半原始:发送到其他来源的引用将限于方案、主机和端口。在同一来源上的导航仍将包括路径。
  • 同源:将发送推荐人同源,但跨来源请求将不包含推荐人信息。
  • 严格原始的:当协议安全级别保持不变(HTTPS→HTTPS)时,仅将文档的来源作为引用者发送,但不要将其发送到不太安全的目的地(HTTPS→HTTP)。
  • 严格原-半交叉原(默认):在执行相同的源请求时发送完整的URL,仅在协议安全级别保持不变时发送源(HTTPS→HTTPS),不向不太安全的目的地发送头(HTTPS→HTTP)。
  • 不安全地:推荐人将包括来源路径(但不是片段,密码,或用户名).此值不安全,因为它将源和路径从TLS保护的资源泄漏到不安全的源。

注:空字符串值("")是默认值,如果参考政策不支持。如果参考政策未在上显式指定<脚本>元素,它将采用更高级别的引用策略,即在整个文档或域上设置一个引用策略。如果更高级别的策略不可用,则将空字符串视为等效于严格原-半交叉原.

型钢混凝土

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

类型

此属性指示所表示的脚本类型。此属性的值将为以下值之一:

未设置属性(默认)、空字符串或JavaScript MIME类型

指示脚本是一个“经典脚本”,包含JavaScript代码。如果脚本引用JavaScript代码而不是指定MIME类型,建议作者省略该属性。JavaScript MIME类型包括IANA媒体类型规范中列出.

导入映射

此值表示元素主体包含导入映射。导入映射是一个JSON对象,开发人员可以使用它来控制浏览器在导入时如何解析模块说明符JavaScript模块.

模块

此值导致代码被视为JavaScript模块。脚本内容的处理被延迟。这个字符集推迟属性没有效果。有关使用的信息模块,请参阅我们的JavaScript模块指南。与经典脚本不同,模块脚本需要使用CORS协议进行跨源抓取。

投机规则 实验

此值表示元素主体包含推测规则。推测规则采用JSON对象的形式,确定浏览器应预取或预呈现哪些资源。这是推测规则API.

任何其他值

嵌入的内容被视为数据块,不会被浏览器处理。开发人员必须使用非JavaScript MIME类型的有效MIME类型来表示数据块。将忽略所有其他属性,包括型钢混凝土属性。

不推荐的属性

字符集 已弃用

如果存在,其值必须是ASCII码的不区分大小写匹配utf-8型。无需指定字符集属性,因为文档必须使用UTF-8,并且脚本元素从文档继承其字符编码。

语言 已弃用 非标准

就像类型属性,此属性标识正在使用的脚本语言。类型然而,该属性的可能值从未标准化。这个类型应改为使用属性。

笔记

没有脚本异步,推迟type=“模块”属性,以及不带type=“模块”属性,在浏览器继续分析页面之前立即获取并执行。

脚本应与文本/javascriptMIME类型,但浏览器比较宽松,只有在脚本使用图像类型时才阻止它们(图像/*),视频类型(视频/*),一种音频类型(音频/*),或文本/csv.如果脚本被阻止错误事件发送到元素;否则,a负载事件已发送。

示例

基本用法

这些示例显示了如何使用<脚本>元素。

html格式
<script src=“javascript.js”></script>

下面的示例显示了如何将(内联)脚本放入<脚本>元素。

html格式
<脚本>警报(“你好,世界!”);</script>

异步和延迟

使用加载的脚本异步属性将下载脚本,而不会在获取脚本时阻塞页面。但是,一旦下载完成,脚本就会执行,这会阻止页面呈现。这意味着在脚本完成执行之前,网页上的其余内容将无法处理并显示给用户。您无法保证脚本将按任何特定顺序运行。最好使用异步当页面中的脚本彼此独立运行并且不依赖于页面上的其他脚本时。

使用加载的脚本推迟属性将按照它们在页面上显示的顺序加载。在页面内容全部加载之前,它们不会运行,如果您的脚本依赖于DOM(例如,它们修改页面上的一个或多个元素),那么这很有用。

以下是不同脚本加载方法的可视化表示,以及这对页面的意义:

三种脚本加载方法的工作原理:获取和执行JavaScript时,default阻止解析。使用async时,解析仅暂停执行。使用defer,解析不会暂停,但对的执行会在解析完所有其他内容之后进行。

此图像来自HTML规范,复制并裁剪为精简版本,位于抄送4.0许可条款。

例如,如果您有以下脚本元素:

html格式
<script async src=“js/vendor/jquery.js”></script><script async src=“js/script2.js”></script><script async src=“js/script3.js”></script>

您不能依赖脚本加载的顺序。jquery.js公司可以在之前或之后加载script2.jsscript3.js如果是这种情况,这些脚本中的任何函数都取决于jquery(jquery)将产生错误,因为jquery(jquery)不会在脚本运行时定义。

异步当您有一堆要加载的后台脚本,并且您只想尽快将它们安装到位时,应该使用。例如,也许你有一些游戏数据文件要加载,这在游戏实际开始时是需要的,但现在你只想继续显示游戏简介、标题和大厅,而不会被脚本加载所阻止。

使用加载的脚本推迟属性(见下文)将按其在页面中的显示顺序运行,并在下载脚本和内容后立即执行:

html格式
<script defer src=“js/vendor/jquery.js”></script><script defer src=“js/script2.js”></script><script defer src=“js/script3.js”></script>

在第二个示例中,我们可以确定jquery.js公司将在之前加载script2.jsscript3.js还有那个script2.js将在之前加载script3.js.在页面内容全部加载之前,它们不会运行,如果您的脚本依赖于DOM(例如,它们修改页面上的一个或多个元素),那么这很有用。

总结如下:

  • 异步推迟两者都指示浏览器在单独的线程中下载脚本,而页面的其余部分(DOM等)正在下载,因此在获取过程中不会阻止页面加载。
  • 带有的脚本异步属性将在下载完成后立即执行。这会阻塞页面,并且不保证任何特定的执行顺序。
  • 脚本,带有推迟属性将按照它们所在的顺序加载,并且只有在所有内容都完成加载后才会执行。
  • 如果您的脚本应该立即运行,并且它们没有任何依赖项,则使用异步.
  • 如果脚本需要等待解析并依赖其他脚本和/或DOM,请使用推迟并将其对应<脚本>元素的顺序。

模块回退

支持模块的值类型属性忽略任何带有诺模架属性。这使您能够在提供诺模架-标记了非支持浏览器的备用脚本。

html格式
<script type=“module”src=“main.js”></script><script nomodule src=“fallback.js”>

使用importmap导入模块

在脚本中导入模块时,如果不使用type=导入映射则必须使用绝对或相对URL的模块说明符导入每个模块。在下面的示例中,第一个模块说明符(“./shapes/square.js”)相对于文档的基本URL进行解析,而第二个是绝对URL。

js型
导入{name作为squareName,从“./shapes/square.js”中绘制};从“”导入{name作为circleName}https://example.com/shapes/circle.js";

导入映射允许您提供一个映射,如果匹配,可以替换模块说明符中的文本。下面的导入映射定义了键广场圆圈可以用作上面显示的模块说明符的别名。

html格式
<script type=“importmap”>{“进口”:{“方形”:“./shapes/square.js”,“圆”:“https://example.com/shapes/circle.js"}}</script>

这允许我们使用模块说明符中的名称(而不是绝对或相对URL)导入模块。

js型
导入{name作为squareName,从“square”中绘制};从“circle”导入{name作为circleName};

有关可以使用导入地图执行的操作的更多示例,请参见使用导入映射导入模块JavaScript模块指南中的部分。

在HTML中嵌入数据

您还可以使用<脚本>元素,通过在类型属性。

html格式
<!-- 由服务器生成--><script id=“data”type=“application/json”>{“用户ID”:1234,“用户名”:“玛丽亚·克鲁兹”,“memberSince”:“2000-01-01T00:00:0.000Z”}</script><!-- 静态--><脚本>const userInfo=JSON.parse(document.getElementById(“data”).text);console.log(“用户信息:%o”,userInfo);</script>

在获取并执行脚本之前阻止渲染

您可以包括提供内的标记舞台调度属性;在获取并执行脚本之前,页面的呈现将被阻止。在下面的示例中,我们阻止异步脚本上的渲染,这样脚本不会阻止解析,但可以保证在渲染开始之前进行评估。

html格式
<script blocking=“render”async src=“async-script.js”></script>

技术总结

内容类别 元数据内容,流量内容,短语内容.
允许的内容 动态脚本,例如文本/javascript.
标签遗漏 无,开始和结束标记都是必需的。
获准父母 接受的任何元素元数据内容,或任何接受措辞内容.
隐含ARIA角色 没有对应的角色
允许的ARIA角色 角色被允许
DOM接口 HTML脚本元素

规格

规范
HTML标准
#脚本元素

浏览器兼容性

BCD表仅在浏览器中加载

另请参见