成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

<script> 屬性詳解

pkhope / 3226人閱讀

摘要：指定了屬性的元素標(biāo)簽內(nèi)不應(yīng)該再有嵌入的腳本。該屬性定義元素包含或引用的腳本語言。為時缺省為方式。該屬性指示瀏覽器是否在允許的情況下異步執(zhí)行該腳本。這個屬性被設(shè)定用來通知瀏覽器該腳本將在文檔完成解析后，觸發(fā)事件前執(zhí)行。

html元素及其屬性，相信大家都很熟悉，但是script的屬性，未必熟悉，故而整理總結(jié)，以待查閱。

前言

默認(rèn)情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染引擎遇到 2、type 

該屬性定義script元素包含或src引用的腳本語言。屬性的值為MIME類型;

只能是下面幾種方式:

text/javascript（默認(rèn)）

text/ecmascript

application/javascript

application/ecmascript

除了上面以上4中，還有一種

module

即代碼會被當(dāng)作JavaScript模塊處理。

type為module時缺省為defer方式。

3、async 
該屬性指示瀏覽器是否在允許的情況下異步執(zhí)行該腳本。該屬性對于沒有src屬性的腳本不起作用。

等同于下面

var script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);
//從腳本中創(chuàng)建的腳本默認(rèn)為異步。

瀏覽器支持： chrome，firfox，safari，IE10+都已經(jīng)實(shí)現(xiàn)。

4、defer 
這個屬性被設(shè)定用來通知瀏覽器“該腳本將在文檔完成解析后，觸發(fā) DOMContentLoaded 事件前執(zhí)行”。如果無src，則不起作用。

精髓就是一句話： 不管這段腳本放在html的何處(即使head中)，都會等待dom解析完成后再去加載。
如果將script標(biāo)簽放在整個html文件的最后，那就不需要defer了，畫蛇添足。

瀏覽器支持： chrome，firfox，safari，IE10+都已經(jīng)實(shí)現(xiàn)。

async和defer的區(qū)別:
defer要等到整個頁面正常渲染結(jié)束，才會執(zhí)行；
async是在渲染html時發(fā)現(xiàn) 腳本已經(jīng)異步下載完，就去執(zhí)行，執(zhí)行完了，再繼續(xù)往下渲染html

5、crossorigin 
使用本屬性來使那些將靜態(tài)資源放在另外一個域名的站點(diǎn)打印錯誤信息。

what??? 這個官方的解釋讓人很懵逼，別急。
由于使用普通的方式加載script，即下面這種

如果src中的跨站js文件，出現(xiàn)了錯誤。我們是無法通過監(jiān)聽window.onerror來將錯誤準(zhǔn)確的打印出來。只能打印出來"Script error"（當(dāng)然瀏覽器控制臺可能會出來詳細(xì)錯誤，但我們無法在代碼中捕獲，并作出處理）

所以我們要添加crossorigin屬性來獲取跨站文件的錯誤信息。
首先，服務(wù)器要允許跨站獲取文件

access-control-allow-origin: *

其次，在js中添加crossorigin

crossorigin的值為:
anonymous 采用普通方式設(shè)置對此元素的CORS請求
use-credentials 采用憑證的方式設(shè)置對此元素的CORS請求

瀏覽器支持： 只有IE未實(shí)現(xiàn)，其他均實(shí)現(xiàn)。

6、integrity 
提供hash值，來驗(yàn)證覽器獲得的資源（例如從 CDN 獲得的）是否被篡改。

首先需要服務(wù)器開啟內(nèi)容安全策略，即 Content-Security-Policy

Content-Security-Policy: require-sri-for script;
//加載script時需要進(jìn)行校驗(yàn)

第二步，加入integrity值

integrity的值為src文件進(jìn)行base64編碼的值，可通過SRI在線生成工具生成。

如果integrity和src文件的hash值不匹配，則瀏覽器會報錯。

除了對script進(jìn)行校驗(yàn)外，同樣還可對style進(jìn)行校驗(yàn)

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

瀏覽器支持： 只有chrome，firfox實(shí)現(xiàn)，safari，IE都未實(shí)現(xiàn)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103158.html

相關(guān)文章

  • 詳解Vue3 Composition API優(yōu)雅封裝第三方組件

    　　我們時常會想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，這些功能如何優(yōu)化的實(shí)現(xiàn)？　　以Element Plus的el-input為例：　　在封裝一個MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來編寫：　　//MyInput.vue 　　<template&...

    3403771864 評論0 收藏0

  • &lt;script&gt; 屬性詳解

    摘要：指定了屬性的元素標(biāo)簽內(nèi)不應(yīng)該再有嵌入的腳本。該屬性定義元素包含或引用的腳本語言。為時缺省為方式。該屬性指示瀏覽器是否在允許的情況下異步執(zhí)行該腳本。這個屬性被設(shè)定用來通知瀏覽器該腳本將在文檔完成解析后，觸發(fā)事件前執(zhí)行。 html元素及其屬性，相信大家都很熟悉，但是script的屬性，未必熟悉，故而整理總結(jié)，以待查閱。 前言 默認(rèn)情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染...

    libin19890520 評論0 收藏0

  • VUE跨域詳解以及常用解決跨域的方法匯總

    　　跨域　　要知道在請求后臺接口遇到Access-Control-Allow-Origin時，這就表明跨域了。　　首先解釋跨域，是因?yàn)闉g覽器的同源策略所導(dǎo)致，同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源是指：域名、協(xié)議、端口相同　　解決跨域常用方法：　　一、VUE中常用proxy來解決跨域問題　　1、在vue.config.js中設(shè)置如下代碼...

    3403771864 評論0 收藏0

  • vue使用vite配置跨域以及環(huán)境配置詳解

    　　這篇文章要說的就是如何配置跨域，代理域名，其實(shí)這個話題繞不開的，現(xiàn)在我們就說說vite的代理　　server:{ 　　proxy:{ 　　'/api':{ 　　target:'https://baidu.com', 　　changeOrigin:true, 　　rewrite:(path)=>path.replace(/^\/api/,''...

    3403771864 評論0 收藏0

  • Skypack布局前端基建實(shí)現(xiàn)過程詳解

    　　用vite作為項(xiàng)目打包工具，這是為什么？其中最主要的原因是 ——vite在開發(fā)環(huán)境基于ESM規(guī)范實(shí)現(xiàn)的Nobundle模式，節(jié)省了代碼打包的時間?！　‘?dāng)前打包的需求任然有，且ESM規(guī)范兼容性越來越好，進(jìn)入生產(chǎn)環(huán)境大面積可用的狀態(tài)也不是不可能?！　‘?dāng)生產(chǎn)環(huán)境打包將不再是剛需時?！　×硪环矫?，從HTTP協(xié)議的角度看，在HTTP/1.1時代，多個模塊被打包成一個文件能減少瀏覽器并發(fā)請求數(shù)，達(dá)到優(yōu)化目...

    3403771864 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<