<script>:script元素
属性
异步 -
对于经典脚本,如果 异步 属性,则经典脚本将在解析时并行获取,并在可用时立即进行评估。 对于 模块脚本 ,如果 异步 属性存在时,脚本及其所有依赖项将在解析时并行获取,并在可用时立即进行评估。 警告: 如果 型钢混凝土 对于经典脚本,该属性不存在(即对于内联脚本),在这种情况下,它将不起作用。 此属性允许消除 解析器阻塞JavaScript 浏览器在继续解析之前必须加载和评估脚本。 推迟 在这种情况下也有类似的效果。 如果使用 推迟 属性时,元素的行为就像只有 异步 属性。 这是一个布尔属性:元素上存在布尔属性表示真值,缺少属性表示假值。 请参见 浏览器兼容性 有关浏览器支持的注释。 另请参见 asm.js的异步脚本 . 属性rc 实验 -
指定希望浏览器发送 归属-报告-合格 标头以及脚本资源请求。 在服务器端,这用于触发发送 属性-报告-注册表-源 或 属性-报告-寄存器-触发器 响应中的标头,以注册基于JavaScript的 归因来源 或 归因触发器 分别是。 应发回哪个响应标头取决于 归属-报告-合格 触发注册的标头。 可以设置此属性的两个版本: 布尔值,即仅 属性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类型来表示数据块。 将忽略所有其他属性,包括 型钢混凝土 属性。
不推荐的属性
笔记
示例
基本用法
<script src=“javascript.js”></script>
<脚本> 警报(“你好,世界!”); </script>
异步和延迟
<script async src=“js/vendor/jquery.js”></script> <script async src=“js/script2.js”></script> <script async src=“js/script3.js”></script>
<script defer src=“js/vendor/jquery.js”></script> <script defer src=“js/script2.js”></script> <script defer src=“js/script3.js”></script>
异步 和 推迟 两者都指示浏览器在单独的线程中下载脚本,而页面的其余部分(DOM等)正在下载,因此在获取过程中不会阻止页面加载。 带有的脚本 异步 属性将在下载完成后立即执行。 这会阻塞页面,并且不保证任何特定的执行顺序。 脚本,带有 推迟 属性将按照它们所在的顺序加载,并且只有在所有内容都完成加载后才会执行。 如果您的脚本应该立即运行,并且它们没有任何依赖项,则使用 异步 . 如果脚本需要等待解析并依赖其他脚本和/或DOM,请使用 推迟 并将其对应 <脚本> 元素的顺序。
模块回退
<script type=“module”src=“main.js”></script> <script nomodule src=“fallback.js”>
使用importmap导入模块
导入{name作为squareName,从“./shapes/square.js”中绘制}; 从“”导入{name作为circleName} https://example.com/shapes/circle.js ";
<script type=“importmap”> { “进口”:{ “方形”:“./shapes/square.js”, “圆”:“ https://example.com/shapes/circle.js " } } </script>
导入{name作为squareName,从“square”中绘制}; 从“circle”导入{name作为circleName};
在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>
在获取并执行脚本之前阻止渲染
<script blocking=“render”async src=“async-script.js”></script>