<script> 屬性詳解

pkhope 發布于2019-08-23 16:42 / 3219人閱讀

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

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都未實現。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103158.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 腳本，即渲染...

libin19890520 2019-08-02 16:10 評論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規范兼容性越來越好，進入生產環境大面積可用的狀態也不是不可能?！　‘斏a環境打包將不再是剛需時。　　另一方面，從HTTP協議的角度看，在HTTP/1.1時代，多個模塊被打包成一個文件能減少瀏覽器并發請求數，達到優化目...

3403771864 2022-09-12 20:50 評論0 收藏0