HTML script 簡(jiǎn)體中文

HTML 元素用于嵌入可執(zhí)行代碼或數(shù)據(jù)；這通常用于嵌入或引用 JavaScript 代碼。 元素還可以與其他語(yǔ)言一起使用，例如 WebGL 的 GLSL 著色器編程語(yǔ)言和 JSON 。

該元素包括 global attributes 。

對(duì)于經(jīng)典腳本，如果存在 async 屬性，則經(jīng)典腳本將在解析時(shí)并行獲取，并在可用時(shí)立即進(jìn)行評(píng)估。

對(duì)于 module scripts ，如果存在 async 屬性，則腳本及其所有依賴(lài)項(xiàng)將在解析時(shí)并行獲取，并在可用時(shí)立即進(jìn)行評(píng)估。

警告：如果經(jīng)典腳本中不存在 src 屬性（即對(duì)于內(nèi)聯(lián)腳本），則不得使用此屬性，在這種情況下它不會(huì)產(chǎn)生任何效果。

此屬性可以消除阻止解析器的 JavaScript ，在這種情況下，瀏覽器必須先加載并評(píng)估腳本，然后才能繼續(xù)解析。在這種情況下， defer 具有類(lèi)似的效果。

如果使用 defer 屬性指定該屬性，則該元素的行為將如同僅指定了 async 屬性一樣。

這是一個(gè) boolean 屬性：元素上存在 boolean 屬性表示 true 值，而不存在該屬性表示 false 值。

有關(guān)瀏覽器支持的說(shuō)明，請(qǐng)參閱 Browser compatibility 。另請(qǐng)參閱 Async scripts for asm.js 。

指定您希望瀏覽器隨腳本資源請(qǐng)求一起發(fā)送 Attribution-Reporting-Eligible 標(biāo)頭。在服務(wù)器端，這用于觸發(fā)在響應(yīng)中發(fā)送 Attribution-Reporting-Register-Source 或 Attribution-Reporting-Register-Trigger 標(biāo)頭，以分別注冊(cè)基于 JavaScript 的 attribution source 或 attribution trigger 。應(yīng)發(fā)回哪個(gè)響應(yīng)標(biāo)頭取決于觸發(fā)注冊(cè)的 Attribution-Reporting-Eligible 標(biāo)頭的值。

注意：或者，可以通過(guò)發(fā)送包含 attributionReporting 選項(xiàng)（直接在 fetch() 調(diào)用上設(shè)置，或在傳遞到 fetch() 調(diào)用的 Request 對(duì)象上設(shè)置）的 fetch() 請(qǐng)求，或者通過(guò)發(fā)送在請(qǐng)求對(duì)象上調(diào)用 setAttributionReporting() 的 XMLHttpRequest 來(lái)注冊(cè)基于 JavaScript 的歸因源或觸發(fā)器。

您可以設(shè)置此屬性的兩個(gè)版本：

注意：指定多個(gè) URL 意味著可以在同一功能上注冊(cè)多個(gè)歸因來(lái)源。例如，您可能要衡量不同的廣告系列的成功程度，這需要針對(duì)不同的數(shù)據(jù)生成不同的報(bào)告。

請(qǐng)參閱 Attribution Reporting API 了解更多詳細(xì)信息。

此屬性明確指示在獲取腳本時(shí)應(yīng)阻止某些作。要阻止的作必須是下面列出的以空格分隔的阻止標(biāo)記列表。

對(duì)于未通過(guò)標(biāo)準(zhǔn) CORS 檢查的腳本，常規(guī) script 元素會(huì)將最少的信息傳遞給 window.onerror 。要允許對(duì)使用單獨(dú)域的 static 媒體的站點(diǎn)進(jìn)行錯(cuò)誤記錄，請(qǐng)使用此屬性。請(qǐng)參閱 CORS settings attributes 以獲取其有效參數(shù)的更詳細(xì)的說(shuō)明。

設(shè)置此 Boolean 屬性是為了向?yàn)g覽器指示該腳本將在文檔被解析之后但在觸發(fā) DOMContentLoaded 事件之前執(zhí)行。

具有 defer 屬性的腳本將阻止 DOMContentLoaded 事件觸發(fā)，直到腳本加載并完成評(píng)估。

警告：如果 src 屬性不存在（即對(duì)于內(nèi)聯(lián)腳本），則不得使用此屬性，在這種情況下它不會(huì)產(chǎn)生任何效果。

defer 屬性對(duì) module scripts 沒(méi)有影響 — — 它們默認(rèn)推遲。

具有 defer 屬性的腳本將按照它們?cè)谖臋n中出現(xiàn)的順序執(zhí)行。

此屬性可以消除阻止解析器的 JavaScript ，在這種情況下，瀏覽器必須先加載并評(píng)估腳本，然后才能繼續(xù)解析。在這種情況下， async 具有類(lèi)似的效果。

如果該屬性與 async 屬性一起指定，則該元素將表現(xiàn)得好像只指定了 async 屬性。

提供獲取外部腳本時(shí)使用的相對(duì)優(yōu)先級(jí)的提示。允許的值：

發(fā)出相對(duì)于其他外部腳本的高優(yōu)先級(jí)提取信號(hào)。

發(fā)出相對(duì)于其他外部腳本的低優(yōu)先級(jí)提取信號(hào)。

默認(rèn)：表示自動(dòng)確定相對(duì)于其他外部腳本的獲取優(yōu)先級(jí)。

此屬性包含內(nèi)聯(lián)元數(shù)據(jù)，用戶(hù)代理可以使用它來(lái)驗(yàn)證所獲取的資源是否已交付且未發(fā)生意外作。當(dāng)未指定 src 屬性時(shí)，不得指定此屬性。請(qǐng)參閱 Subresource Integrity 。

設(shè)置此 Boolean 屬性是為了表明該腳本不應(yīng)在支持 ES modules 的瀏覽器中執(zhí)行——實(shí)際上，這可用于向不支持模塊化 JavaScript 代碼的老版本瀏覽器提供后備腳本。

允許 script-src Content-Security-Policy 中的腳本的加密隨機(jī)數(shù)（一次性使用的數(shù)字）。服務(wù)器每次傳輸策略時(shí)都必須生成唯一的隨機(jī)數(shù)值。提供不可猜測(cè)的隨機(jī)數(shù)至關(guān)重要，因?yàn)榉駝t繞過(guò)資源的策略就很容易了。

指示在獲取腳本或腳本獲取的資源時(shí)發(fā)送哪個(gè) referrer ：

注意：空字符串值 ( "" ) 既是默認(rèn)值，也是不支持 referrerpolicy 時(shí)的后備值。如果 元素上未明確指定 referrerpolicy ，它將采用更高級(jí)別的引薦來(lái)源策略，即針對(duì)整個(gè)文檔或域設(shè)置的策略。如果沒(méi)有更高級(jí)別的策略，則空字符串被視為等同于 strict-origin-when-cross-origin 。

此屬性指定外部腳本的 URI；這可以用作在文檔中直接嵌入腳本的替代方法。

此屬性指示所表示的腳本的類(lèi)型。此屬性的值將是以下之一：

表示腳本為 "classic script" ，包含 JavaScript 代碼。如果腳本引用 JavaScript 代碼，則鼓勵(lì)作者省略該屬性，而不是指定 MIME 類(lèi)型。 JavaScript MIME 類(lèi)型為 listed in the IANA media types specification 。

此值表示元素主體包含導(dǎo)入映射。導(dǎo)入映射是一個(gè) JSON 對(duì)象，開(kāi)發(fā)者可以使用它來(lái)控制瀏覽器在導(dǎo)入 JavaScript modules 時(shí)如何解析模塊說(shuō)明符。

此值導(dǎo)致代碼被視為 JavaScript 模塊。腳本內(nèi)容的處理被推遲。 charset 和 defer 屬性不起作用。有關(guān)使用 module 的信息，請(qǐng)參閱我們的 JavaScript modules 指南。與傳統(tǒng)腳本不同，模塊腳本需要使用 CORS 協(xié)議進(jìn)行跨源獲取。

此值表示元素主體包含推測(cè)規(guī)則。推測(cè)規(guī)則采用 JSON 對(duì)象的形式，用于確定瀏覽器應(yīng)預(yù)取或預(yù)渲染哪些資源。這是 Speculation Rules API 的一部分。

嵌入的內(nèi)容將被視為數(shù)據(jù)塊，瀏覽器不會(huì)對(duì)其進(jìn)行處理。開(kāi)發(fā)人員必須使用非 JavaScript MIME 類(lèi)型的有效 MIME 類(lèi)型來(lái)表示數(shù)據(jù)塊。所有其他屬性都將被忽略，包括 src 屬性。

如果存在，其值必須是 ASCII （不區(qū)分大小寫(xiě)）匹配 " utf-8 " 。無(wú)需指定 charset 屬性，因?yàn)槲臋n必須使用 UTF-8，并且 script 元素從文檔繼承其字符編碼。

與 type 屬性類(lèi)似，此屬性標(biāo)識(shí)正在使用的腳本語(yǔ)言。但是，與 type 屬性不同的是，此屬性的可能值從未標(biāo)準(zhǔn)化。應(yīng)改用 type 屬性。

沒(méi)有 async 、 defer 或 type="module" 屬性的腳本以及沒(méi)有 type="module" 屬性的內(nèi)聯(lián)腳本會(huì)在瀏覽器繼續(xù)解析頁(yè)面之前立即被獲取并執(zhí)行。

腳本應(yīng)使用 text/javascript MIME 類(lèi)型，但瀏覽器比較寬容，只有當(dāng)腳本使用圖像類(lèi)型 ( image/* )、視頻類(lèi)型 ( video/* )、音頻類(lèi)型 ( audio/* ) 或 text/csv 時(shí)，瀏覽器才會(huì)阻止它們。如果腳本被阻止，則會(huì)向元素發(fā)送 error 事件；否則，會(huì)發(fā)送 load 事件。

這些示例展示了如何使用 元素導(dǎo)入（外部）腳本。

以下示例顯示如何將（內(nèi)聯(lián)）腳本放入 元素內(nèi)。

使用 async 屬性加載的腳本將在獲取腳本時(shí)下載腳本而不會(huì)阻止頁(yè)面。但是，一旦下載完成，腳本就會(huì)執(zhí)行，從而阻止頁(yè)面呈現(xiàn)。這意味著在腳本執(zhí)行完成之前，網(wǎng)頁(yè)上的其余內(nèi)容將無(wú)法處理并顯示給用戶(hù)。您無(wú)法保證腳本會(huì)按任何特定順序運(yùn)行。當(dāng)頁(yè)面中的腳本彼此獨(dú)立運(yùn)行且不依賴(lài)于頁(yè)面上的其他腳本時(shí)，最好使用 async 。

使用 defer 屬性加載的腳本將按照它們?cè)陧?yè)面上出現(xiàn)的順序加載。它們?cè)陧?yè)面內(nèi)容全部加載后才會(huì)運(yùn)行，如果您的腳本依賴(lài)于 DOM（例如，它們修改頁(yè)面上的一個(gè)或多個(gè)元素），這將非常有用。

以下是不同腳本加載方法的直觀表示以及它們對(duì)您的頁(yè)面的意義：

該圖像來(lái)自 HTML spec ，根據(jù) CC BY 4.0 許可條款復(fù)制并裁剪為縮小版本。

例如，如果您有以下腳本元素：

您不能依賴(lài)腳本的加載順序。 jquery.js 可能在 script2.js 和 script3.js 之前或之后加載，如果是這種情況，則這些腳本中依賴(lài)于 jquery 的任何函數(shù)都會(huì)產(chǎn)生錯(cuò)誤，因?yàn)?jquery 不會(huì)在腳本運(yùn)行時(shí)定義。

當(dāng)您需要加載大量后臺(tái)腳本，并且只想盡快將它們放置到位時(shí)，應(yīng)該使用 async 。例如，也許您需要加載一些游戲數(shù)據(jù)文件，這些文件在游戲真正開(kāi)始時(shí)會(huì)用到，但現(xiàn)在您只想繼續(xù)顯示游戲簡(jiǎn)介、標(biāo)題和大廳，而不想讓它們被腳本加載所阻礙。

使用 defer 屬性加載的腳本（見(jiàn)下文）將按照它們?cè)陧?yè)面中出現(xiàn)的順序運(yùn)行，并在腳本和內(nèi)容下載后立即執(zhí)行它們：

在第二個(gè)示例中，我們可以確定 jquery.js 將在 script2.js 和 script3.js 之前加載，而 script2.js 將在 script3.js 之前加載。它們?cè)陧?yè)面內(nèi)容全部加載之前不會(huì)運(yùn)行，如果您的腳本依賴(lài)于 DOM 到位（例如，它們修改頁(yè)面上的一個(gè)或多個(gè)元素），這很有用。

To summarize:

支持 type 屬性的 module 值的瀏覽器會(huì)忽略任何具有 nomodule 屬性的腳本。這樣一來(lái)，您就可以使用模塊腳本，同時(shí)為不支持的瀏覽器提供標(biāo)有 nomodule 的后備腳本。

在腳本中導(dǎo)入模塊時(shí)，如果您不使用 type=importmap 功能，則必須使用模塊說(shuō)明符（絕對(duì) URL 或相對(duì) URL）導(dǎo)入每個(gè)模塊。在下面的示例中，第一個(gè)模塊說(shuō)明符 ( "./shapes/square.js" ) 相對(duì)于文檔的基本 URL 進(jìn)行解析，而第二個(gè)模塊說(shuō)明符是絕對(duì) URL。

導(dǎo)入映射允許您提供一個(gè)映射，如果匹配，該映射可以替換模塊說(shuō)明符中的文本。下面的導(dǎo)入映射定義了鍵 square 和 circle ，它們可以用作上面顯示的模塊說(shuō)明符的別名。

這使我們能夠使用模塊說(shuō)明符中的名稱(chēng)（而不是絕對(duì)或相對(duì) URL）來(lái)導(dǎo)入模塊。

有關(guān)使用導(dǎo)入映射可以執(zhí)行的作的更多示例，請(qǐng)參閱 JavaScript 模塊指南中的 Importing modules using import maps 部分。

您還可以使用 元素通過(guò)在 type 屬性中指定有效的非 JavaScript MIME 類(lèi)型，將數(shù)據(jù)嵌入到具有服務(wù)器端呈現(xiàn)的 HTML 中。