script元素屬性及引入方法
HTML4.01為script定義了下列6個屬性:
- async:可選。
- 表示應該立即下載腳本,但不應妨礙頁面中的其他操作,比如下載其他資源或等待加載其他腳本。(只對外部腳本文件有效)
- async屬性的目的是:不讓頁面等待兩個腳本 下載和執行,從而異步加載頁面其他內容。為此,建議異步腳本不要在加載期間修改DOM。異步腳本會在頁面load事件前執行。
- async屬性與defer屬性類似,都用於改變處理腳本的行為,與defer類似都只適用於 外部腳本文件,並告訴瀏覽器立即下載文件,但與defer不同的是,標記為async的腳本並不保證按照指定的先后順序執行,因此如果頁面中有兩個或多個帶有async屬性的引用文件,確保兩者之間互不依賴非常重要。
- charset:可選。
- 表示通過src屬性指定的代碼的字符集。由於大多數瀏覽器會忽略它的值,因為這個屬性很少有人用。
- defer:可選。
- 表示腳本可以延遲到文檔全部被解析和顯示之后再執行。(只對外部腳本文件有效,IE7及更早版本對嵌入腳本也支持這個屬性)
- defer屬性用途是:表明在執行時不會影響頁面構造,也就是說,腳本會延遲到整個頁面都解析完畢后再運行。因此在script中設置defer屬性,相當於告訴瀏覽器立即下載,但延遲執行。
- HTML5規范要求按照腳本出現的先后順序執行,第一個延遲腳本會優先於第二個腳本執行,但現實中延遲腳本並不會按一定順序執行,因此最好包含一個延遲腳本。
- language:已廢棄。
- 原來用於表示代碼編寫使用的語言(如js、js1.2.或VBScript),大多數瀏覽器會忽略這個屬性,因此也沒有必要用了。
- src:可選。
- 表示包含要執行代碼的外部文件。
- type:可選。
-
可以看成是language的代替屬性:表示編寫代碼使用的腳本語言的內容類型(也成為MIME類型)。
-
雖然text/javascript和text/ecmascript都已經不被推薦使用,但人們一直以來使用的都還是text/javascript。實際上,服務器在傳送JavaScript文件時使用的MIME類型通常是application/x-javascript,但type中設置這個值卻可能會導致腳本文件被忽略。另外,在非IE瀏覽器中還可以使用一下值:application/javascript和application/ecmascript。
-
考慮到約定俗成和最大限度的瀏覽器兼容性,目前type屬性的值依舊還是text/javascript。不過,這個屬性並不是必需的,如果沒有指定這個屬性,則其默認值仍為text/javascript。
使用script元素的方式有兩種:
- 直接在頁面中嵌入js代碼。
- 包含在script元素內部的js代碼將從上至下依次解釋。解釋器會解釋一個函數的定義,然后將該定義保存在自己的環境中。
- 在解釋器對script內部的所有代碼求值完畢以前,頁面中的其他內容都不會被瀏覽器加載和顯示。
- 引用外部js文件。
- 通過script的src屬性引用外部文件,還可以包含來自外部域的文件,即src屬性指向當前HTML頁面所在域之外的某個域中的完整URL。樣外部域中的代碼也會被加載和解析,不過,加載外部域的文件要多加小心,如果遇到懷有惡意的程序員,那么他們隨時都可能替換該文的代碼。
注意:
- 帶有src屬性的元素中,不應該包含額外的js代碼,如果包含了嵌入的代碼,則只會下載並執行外部腳本文件,嵌入的代碼會被忽略 。
- 無論如何包含代碼,只要不存在defer和async屬性,瀏覽器都會按照script元素在頁面中出現的順序對他們一次解析,即第一個script元素中的代碼解析完成后,才解析第二個,第三個……