HTML <script>元素的10个属性

将javascrip插入HTML的主要方法是使用<script>元素,这个元素是网景公司(Netscape)创造出来的,script 元素所属类型因其用法而异。位于 head 元素中的 script 元素属于元数据元素,位于其他元素(如 body 或 section)中的则属于短语元素

script的10个属性

1、async

可选。只对外部文件有效,HTML5中新增属性,用于定义一个异步执行的脚本;该属性表示应该立即下载src属性指定的脚本资源,但不能阻止其他页面动作,比如下载资源或其他脚本加载,即不必等该异步脚本下载和执行后再加载页面,同样也不必等到该异步脚本下载和执行后再加载其他脚本;当有多个添加了async属性的脚本时,不能保证执行顺序和出现顺序一致;所以要避免异步执行脚本之间存在依赖关系

<script async src="https://www.somewhere.com/index.js"></script>

2、charset

可选。规定在外部脚本文件中使用的字符编码。这个属性很少使用,因为大多数浏览器不在乎它的值,在w3c的script标签属性列表已经没有列出这个属性

<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>

常用字符集如下: 

  • UTF-8 - Unicode 字符编码
  • ISO-8859-1 - 拉丁字母表的字符编码

如需查看所有可用的字符集,可以在w3c查看 :HTML 字符集

3、crossorigin

可选。配置相关请求的CORS(跨域资源共享)设置,默认不使用CORS。

  • crossorigin = "anonymus":表示文件请求不必设置凭据标志
  • crossorigin ="use-credentials": 需要设置凭据标志,出站请求会包含凭据
<script src="https://www.somewhere.com/index.js" crossorigin="anonymous|use-credentials">

4、defer 

可选,表示脚本需要立即下载但可以延迟到文档完全被解析和显示之后再执行,即推迟执行脚本

<script defer src="https://www.somewhere.com/index.js"></script>

注意,HTML5规范要求脚本应该按照他们出现的顺序执行,理论上,第一个被推迟的脚本会比第二个 被推迟的脚本先执行,且被推迟执行的脚本都会在DOMContentLoaded事件之前执行,但实际上这个顺序无法保证,所以,最好只包含一个加defer的延迟执行的脚本

5、intergrity

允许比对接受到的资源和指定的加密签名(一般是一个hash值)以验证子资源完整性,如果接收到的资源的签名与这个属性指定的签名不匹配,则页面会报错了,脚本不会执行,这个属性可以用于确保CDN不会提供恶意内容

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>

主要起到安全防护的作用,比如:

  • 减少由托管在 CDN 的资源被篡改而引入的 XSS 风险
  • 只下载资源源站的指定资源
  • 如果http协议请求的资源,可以避免,在通信过程中请求资源被篡改而导致的XSS风险

 

6、src

可选,表示包含要执行的代码的外部文件,规定外部脚本文件的 URL

<script src="myscripts.js"></script>

src的值可以是可以是外部url也可以是站内文件:

  • 绝对 URL - 指向另一个网站(如 src="http://www.example.com/example.js")

  • 相对 URL - 指向网站内的文件(如 src="/scripts/example.js")

注意:外部脚本文件内容中不能包含 <script> 标签。

7、language

已弃用,最初用于表示代码块中的脚本语言,在w3c的script标签属性列表已经没有列出这个属性

8、type

可选,代替language,规定脚本类型,常用值是 JavaScript MIME 类型,如果没有指定type的值,浏览器会假定使用的是 JavaScript,此属性默认值是:application/javascript,还有一个常用值是:application/ecmascript

<script type="application/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

9、referrerpolicy(补,红宝书没列但w3c有列出)

可选,规定在获取脚本时要发送的引用者信息

<script src="myscripts.js" referrerpolicy="origin-when-cross-origin"></script>

 可取值如下:

no-referrer不发送引用者信息。
no-referrer-when-downgrade

默认值。如果协议安全级别保持不变或更高(从 HTTP 到 HTTP,从 HTTPS 到 HTTPS,从 HTTP 到 HTTPS 是可以的),则发送原始来源、路径和查询字符串。

如果协议安全级别较低(从 HTTPS 到 HTTP 不行),则不发送任何内容。

origin发送文档的来源(协议、主机和端口)。
origin-when-cross-origin对于跨域请求,发送文档的来源。对于同源请求,发送文档的来源、路径和查询字符串。
same-origin对于同源请求,发送引用者(referrer)。对于跨域请求,不发送引用者。
strict-origin-when-cross-origin

如果协议的安全级别保持不变或更高(从 HTTP 到 HTTP,从 HTTPS 到 HTTPS,以及从 HTTP 到 HTTPS 都可以),则发送来源信息。

对于较低安全级别(从 HTTPS 到 HTTP),则不发送任何内容。

unsafe-url发送来源、路径和查询字符串(无论安全级别如何)。请谨慎使用此值!

10、nomodule(补,红宝书没列但w3c有列出)

规定脚本不应在支持 ES2015 模块的浏览器中执行。

可取值为

  • True
  • False

ps:本文基于红宝书第4版,并结合w3c的学习小笔记,若有不恰当之处,欢迎交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/720613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jetpack Compose: Hello Android

Jetpack Compose 是一个现代化的工具包&#xff0c;用于使用声明式方法构建原生 Android UI。在本博文中&#xff0c;我们将深入了解一个基本的 “Hello Android” 示例&#xff0c;以帮助您开始使用 Jetpack Compose。我们将探讨所提供代码片段中使用的函数和注解。 入门 在…

软件测试--性能测试工具JMeter

软件测试--性能测试工具JMeter 主流性能测试工具1.主流性能测试工具Loadrunner和Jmeter对比 —— 相同点2.主流性能测试工具Loadrunner和Jmeter对比 —— 不同点JMeter基本使用JMeter环境搭建1.安装JDK:2.安装Jmeter:3.注意点:JMeter功能概要1. JMeter文件目录介绍1.1 bin目…

瑞_23种设计模式_享元模式

文章目录 1 享元模式&#xff08;Flyweight Pattern&#xff09;1.1 介绍1.2 概述1.3 享元模式的结构1.4 享元模式的优缺点1.5 享元模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析&#xff08;Integer类&#xff09; &#x1f64a; …

如何保证某个程序系统内只运行一个,保证原子性

GetMapping("/startETL") // Idempotent(expireTime 90, info "请勿90秒内连续点击")public R getGaugeTestData6() {log.info("start ETL");//redis设置t_data_load_record 值为2bladeRedis.set("t_data_load_record_type", 2);Str…

13-Java代理模式 ( Proxy Pattern )

Java代理模式 摘要实现范例 代理模式&#xff08;Proxy Pattern&#xff09;使用一个类代表另一个类的功能 代理模式创建具有现有对象的对象&#xff0c;以便向外界提供功能接口 代理模式属于结构型模式 摘要 1. 意图 为其他对象提供一种代理以控制对这个对象的访问2. 主…

力扣206反转链表

206.反转链表 力扣题目链接(opens new window) 题意&#xff1a;反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 1&#xff0c;双指针 2&#xff0c;递归。递归参考双指针更容易写&#xff0c; 为什么不用头插…

如何开通 chatGPT4 会员

如何开通 chatGPT4 会员 你是否对最新的人工智能技术充满好奇&#xff1f;想要体验OpenAI的最新成果&#xff0c;ChatGPT-4&#xff1f;现在&#xff0c;通过https://bewildcard.com/i/XUE16 这个链接注册WildCard&#xff0c;你可以轻松实现这一切&#xff01; 详细教程Wild…

3.1_2024ctf青少年比赛部分web题

php后门 根据x-powered-by知道php的版本 该版本存在漏洞&#xff1a; PHP 8.1.0-dev 开发版本后门 根据报错信息&#xff0c;进行提示&#xff0c;前 GET / HTTP/1.1 Host: challenge.qsnctf.com:31639 User-Agentt:12345678system(cat /flag);var_dump(2*3);zerodium12345678…

【小白学机器学习6】真实值,观测值,拟合值,以及数据的误差的评价:集中趋势,离散度,形状等

目录 1 世界上有哪几种值&#xff1f;只有3种值 1.1 真值/真实值/理想值/主观值&#xff08;形而上学世界里&#xff09; 1.2 实际值/现实值/观测值/样本值&#xff08;看到的/记录下来的&#xff09; 1.3 拟合值/预测值&#xff08;算出来的&#xff09; 2 对数据的各种…

C语言利用函数创建链表,修改链表(插入,删除,添加),指针函数的返回

这段代码是一个简单的链表操作程序&#xff0c;包括创建节点、在链表末尾添加节点、在指定位置插入节点和删除指定位置的节点。以下是详细的注释&#xff1a; #include<stdio.h> #include<stdlib.h>// 定义链表节点结构体 struct listnode{int i; // 节点存储的整…

TDengine 签约树根互联,应对“高基数”难题

近日&#xff0c;树根互联与涛思数据达成签约合作&#xff0c;共同推动智能制造领域的建设。作为一家处于高速发展期的工业互联网企业&#xff0c;树根互联将新一代信息技术与制造业深度融合&#xff0c;开发了以自主可控的工业互联网操作系统为核心的工业互联网平台——根云平…

【HTML】HTML标签实例学习笔记(待更新)-黑马程序员

【HTML】HTML标签实例学习笔记&#xff08;待更新&#xff09;-黑马程序员 成对出现的标签 标签一般都是成对出现&#xff0c;标签之间的关系有包含关系和并列关系两种。 像 <head></head>为双标签&#xff0c;<br/>为单标签 单标签很少 大多数都为双标签。…

springboot项目单纯使用nacos注册中心功能

Spring Boot 项目完全可以单独使用 Nacos 作为注册中心。Nacos 是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。它支持服务的注册与发现&#xff0c;能够与 Spring Boot 应用无缝集成&#xff0c;为微服务架构提供了强大的支持。 在使用 Nacos 作为注册中…

Python实现DMI工具判断信号:股票技术分析的工具系列(3)

Python实现DMI工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;3&#xff09; 介绍算法解释 代码rolling函数介绍完整代码 介绍 先看看官方介绍&#xff1a; DMI (趋向指标&#xff09; 用法 1.PDI线从下向上突破MDI线&#xff0c;显示有新多头进场&#xff0c;为…

系统架构29 - 架构风格补充(下)

面向服务架构风格 关键目标关键技术实现方式WEB Service服务注册表企业服务总线ESB特点&#xff1a; SOA是一种 粗粒度、松耦合服务架构&#xff0c;服务之间通过简单、精确定义接口进行通信&#xff0c;不涉及底层编程接口和通信模型。 在SOA中&#xff0c; 服务是一种为了满…

BUUCTF---[BJDCTF2020]藏藏藏1

1.题目描述 2.下载附件&#xff0c;解压之后是一张图片和一个文本 3.把图片放在winhex,发现图片里面包含压缩包 4.在kali中使用binwalk查看&#xff0c;然后使用foremost分离&#xff0c;在使用tree查看分离出来的文件&#xff0c;最后将zip文件使用unzip进行解压。步骤如下 5.…

pdf编辑软件哪个好用?5款PDF编辑器分享

pdf编辑软件哪个好用&#xff1f;PDF编辑软件在现代办公和学术研究中发挥着举足轻重的作用&#xff0c;它们不仅具备基础的编辑和修改功能&#xff0c;还能够支持多种注释工具&#xff0c;帮助我们高效地管理和整理PDF文件。无论是需要调整文档布局、添加文本或图像&#xff0c…

RocketMQ - 从RocketMQ全链路分析一下为什么用户支付后没收到红包?

1. 订单系统推送消息到MQ的过程会丢失消息吗? 订单系统在接收到订单支付成功的通知之后,必然会去推送一条订单支付成功的消息到MQ,那么在这个过程中,会出现丢失消息的问题吗? 答案是可能会丢失的,比如订单系统在推送消息到RocketMQ的过程中,是通过网络去进行传输的,但…

C++ 前缀和

目录 例1 例2 例3 例4 例5 例6 例7 例8 例1 DP34 【模板】前缀和 分析&#xff1a;dp和arr的大小并不是固定的&#xff0c;就是有没有偏移量&#xff0c;这里的n是从1开始&#xff0c;不如直接放到下标1处&#xff0c;在最后的减法时&#xff0c;如果用第一个参考代码会…

MySQL - #1115 - Unknown character set: ‘utf8mb4‘

问题描述 #1115 - Unknown character set: utf8mb4 原因分析 因为在创建表的时候是有这个编码的&#xff0c;但是在单独修改某个字段的编码时发现报错&#xff0c;虽然觉得莫名其妙&#xff0c;那就将机就计&#xff0c;改成大概率有的编码——UTF8&#xff0c;因为这边为的是…