<script>标签的属性

更新日期: 2019-04-03阅读: 8k标签: 标签

1、src

定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。
<script src="file.js"></script>


2、type

该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型;

只能是下面几种方式:

  • text/javascript(默认)
  • text/ecmascript
  • application/javascript
  • application/ecmascript
<script src="demo.js" type="text/javascript"></script>

除了上面以上4中,还有一种

  • module

代码会被当作JavaScript模块处理。

<script type="module">
  import {addTextToBody} from './utils.js';
  addTextToBody('Modules are pretty cool.');
</script>

type为module时缺省为defer方式。


3、async

该属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于没有src属性的脚本不起作用。
<script src="file.js" async></script>

等同于下面

var script = document.createElement('script');
script.src = "file.js";
document.body.appendChild(script);
//从脚本中创建的脚本默认为异步。

浏览器支持: chrome,firfox,safari,IE10+都已经实现。


4、defer

这个属性被设定用来通知浏览器“该脚本将在文档完成解析后,触发 domContentLoaded 事件前执行”。如果无src,则不起作用。
<script src="demo.js" defer></script>

精髓就是一句话: 不管这段脚本放在html的何处(即使head中),都会等待dom解析完成后再去加载。
如果将script标签放在整个html文件的最后,那就不需要defer了,画蛇添足。

浏览器支持: chrome,firfox,safari,IE10+都已经实现。

async和defer的区别:
defer要等到整个页面正常渲染结束,才会执行;
async是在渲染html时发现 脚本已经异步下载完,就去执行,执行完了,再继续往下渲染html


5、crossorigin

使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。

what??? 这个官方的解释让人很懵逼,别急。
由于使用普通的方式加载script,即下面这种

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

如果src中的跨站js文件,出现了错误。我们是无法通过监听window.onerror来将错误准确的打印出来。只能打印出来"Script error"(当然浏览器控制台可能会出来详细错误,但我们无法在代码中捕获,并作出处理)

所以我们要添加crossorigin属性来获取跨站文件的错误信息。
首先,服务器要允许跨站获取文件

access-control-allow-origin: *

其次,在js中添加crossorigin

<script
      src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"
      crossorigin="anonymous">
</script>

crossorigin的值为:
anonymous 采用普通方式设置对此元素的CORS请求
use-credentials 采用凭证的方式设置对此元素的CORS请求

浏览器支持: 只有IE未实现,其他均实现。


6、integrity

提供hash值,来验证览器获得的资源(例如从 CDN 获得的)是否被篡改。

首先需要服务器开启内容安全策略,即 Content-Security-Policy

Content-Security-Policy: require-sri-for script;
//加载script时需要进行校验

第二步,加入integrity值

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" 
   integrity="sha384-9u9lzb/hr8e14GLHe5TEOrTiH3Qtw5DX2Zw9X/g7cqj81W2McEMx5CKOszxdb8jg" crossorigin="anonymous"></script>

integrity的值为src文件进行base64编码的值,可通过SRI在线生成工具生成。如果integrity和src文件的hash值不匹配,则浏览器会报错。

除了对script进行校验外,同样还可对style进行校验

Content-Security-Policy: require-sri-for style;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" 
  integrity="sha384-xyZLiqnBEFn1hDkS8VeG/YHoqOjS/ucimT8TI6GDr9+ZP1UNbZr6d/q0ldMi/xvL" crossorigin="anonymous">

浏览器支持: 只有chrome,firfox实现,safari,IE都未实现。


链接: https://www.fly63.com/article/detial/2703

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

js动态添加html标签和属性_手动插入meta、script、div、img等标签

web网页是由 html标签一层层组成的,js也可以动态添加对应的标签,比如mate标签、script标签、div标签、img标签等,动态创建的方法基本都差不多,下面将简单介绍下如何实现

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

html的title和alt的区别

alt标签是html标签的属性,而title即使标签,又是标签的属性。 当title作为属性时,用来为元素提供额外的说明信息。当鼠标移入变迁内会显示title的内容,以达到补充说明或提示的效果。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!