<script> 属性详解

libin19890520 发布于2019-08-02 16:10 / 620人阅读

摘要：指定了属性的元素标签内不应该再有嵌入的脚本。该属性定义元素包含或引用的脚本语言。为时缺省为方式。该属性指示浏览器是否在允许的情况下异步执行该脚本。这个属性被设定用来通知浏览器该脚本将在文档完成解析后，触发事件前执行。

html元素及其属性，相信大家都很熟悉，但是script的属性，未必熟悉，故而整理总结，以待查阅。

前言

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到 2、type

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

只能是下面几种方式:

text/javascript（默认）

text/ecmascript

application/javascript

application/ecmascript

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

module

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

type为module时缺省为defer方式。

3、async

该属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于没有src属性的脚本不起作用。

等同于下面

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

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

4、defer

这个属性被设定用来通知浏览器“该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行”。如果无src，则不起作用。

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

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

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

5、crossorigin

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

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

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

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

access-control-allow-origin: *

其次，在js中添加crossorigin

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

浏览器支持：只有IE未实现，其他均实现。

6、integrity

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

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

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

第二步，加入integrity值

integrity的值为src文件进行base64编码的值，可通过SRI在线生成工具生成。

如果integrity和src文件的hash值不匹配，则浏览器会报错。

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

Content-Security-Policy: require-sri-for style;

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

专线服务混合云 python &lt&gt java &lt=&gt java&lt &gt asp &lt&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54809.html

详解Vue3 Composition API优雅封装第三方组件

　　我们时常会想在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，这些功能如何优化的实现？　　以Element Plus的el-input为例：　　在封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods先要依照自己的需求来编写：　　//MyInput.vue 　　<template&...

3403771864 2022-10-30 10:34 评论0 收藏0
<script> 属性详解

摘要：指定了属性的元素标签内不应该再有嵌入的脚本。该属性定义元素包含或引用的脚本语言。为时缺省为方式。该属性指示浏览器是否在允许的情况下异步执行该脚本。这个属性被设定用来通知浏览器该脚本将在文档完成解析后，触发事件前执行。 html元素及其属性，相信大家都很熟悉，但是script的属性，未必熟悉，故而整理总结，以待查阅。前言默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染...

pkhope 2019-08-23 16:42 评论0 收藏0
VUE跨域详解以及常用解决跨域的方法汇总

　　跨域　　要知道在请求后台接口遇到Access-Control-Allow-Origin时，这就表明跨域了。　　首先解释跨域，是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同　　解决跨域常用方法：　　一、VUE中常用proxy来解决跨域问题　　1、在vue.config.js中设置如下代码...

3403771864 2022-11-24 22:27 评论0 收藏0
vue使用vite配置跨域以及环境配置详解

　　这篇文章要说的就是如何配置跨域，代理域名，其实这个话题绕不开的，现在我们就说说vite的代理　　server:{ 　　proxy:{ 　　'/api':{ 　　target:'https://baidu.com', 　　changeOrigin:true, 　　rewrite:(path)=>path.replace(/^\/api/,''...

3403771864 2022-09-23 22:48 评论0 收藏0
Skypack布局前端基建实现过程详解

　　用vite作为项目打包工具，这是为什么？其中最主要的原因是 ——vite在开发环境基于ESM规范实现的Nobundle模式，节省了代码打包的时间。　　当前打包的需求任然有，且ESM规范兼容性越来越好，进入生产环境大面积可用的状态也不是不可能。　　当生产环境打包将不再是刚需时。　　另一方面，从HTTP协议的角度看，在HTTP/1.1时代，多个模块被打包成一个文件能减少浏览器并发请求数，达到优化目...

3403771864 2022-09-12 20:50 评论0 收藏0