|
將JavaScript插入HTML的主要方法是使用<script>元素。 1 <script> 的基本使用方式 使用<script>的方式有兩種，第一種就是通過 <script> 直接在網(wǎng)頁中嵌入JavaScript代碼：
包含在<script>內(nèi)的代碼會被從上到下解釋。在上面的例子中，被解釋的是一個函數(shù)定義，并且該函數(shù)會被保存在解釋器環(huán)境中。在<script>元素中的代碼被計算完成之前，頁面的其余內(nèi)容不會被加載，也不會被顯示。在使用行內(nèi)JavaScript代碼時，要注意代碼中不能出現(xiàn)字符串</script>。比如，下面的代碼會導(dǎo)致瀏覽器報錯：
如何正確的寫：（只需要轉(zhuǎn)義字符“\”）
使用<script>的方式有兩種，第二種就是使用包含外部文件中的JavaScript，必須使用src屬性。這個屬性的值是一個URL，指向包含JavaScript代碼的文件，比如： 這個例子在頁面中加載了一個名為example.js的外部文件。文件本身只需包含要放在<script>的起始及結(jié)束標簽中間的JavaScript代碼。與解釋行內(nèi)JavaScript一樣，在解釋外部JavaScript文件時，頁面也會阻塞。 瀏覽器在解析這個資源時，會向src屬性指定的路徑發(fā)送一個GET請求，以取得相應(yīng)資源。 2 <script> 標簽的位置 過去，所有<script>元素都被放在頁面的<head>標簽內(nèi)，如下面的例子所示：
這種做法的主要目的是把外部的CSS和JavaScript文件都集中放到一起。不過，把所有JavaScript文件都放在<head>里，也就意味著必須把所有JavaScript代碼都下載、解析和解釋完成后，才能開始渲染頁面（頁面在瀏覽器解析到<body>的起始標簽時開始渲染）。對于需要很多JavaScript的頁面，這會導(dǎo)致頁面渲染的明顯延遲，在此期間瀏覽器窗口完全空白。為解決這個問題，現(xiàn)代Web應(yīng)用程序通常將所有JavaScript引用放在<body>元素中的頁面內(nèi)容后面，如下面的例子所示：
這樣一來，頁面會在處理JavaScript代碼之前完全渲染頁面。用戶會感覺頁面加載更快了，因為瀏覽器顯示空白頁面的時間短了。 3 推遲執(zhí)行腳本 HTML 4.01為<script>元素定義了一個叫defer的屬性。這個屬性表示腳本在執(zhí)行的時候不會改變頁面的結(jié)構(gòu)。也就是說，腳本會被延遲到整個頁面都解析完畢后再運行。因此，在<script>元素上設(shè)置defer屬性，相當于告訴瀏覽器立即下載，但延遲執(zhí)行。
雖然這個例子中的<script>元素包含在頁面的<head>中，但它們會在瀏覽器解析到結(jié)束的</html>標簽后才會執(zhí)行。 HTML5規(guī)范要求腳本應(yīng)該按照它們出現(xiàn)的順序執(zhí)行，因此第一個推遲的腳本會在第二個推遲的腳本之前執(zhí)行，而且兩者都會在DOMContentLoaded事件之前執(zhí)行。 defer屬性只對外部腳本文件才有效。這是HTML5中明確規(guī)定的，因此支持HTML5的瀏覽器會忽略行內(nèi)腳本的defer屬性。 4 異步執(zhí)行腳本 HTML5為<script>元素定義了async屬性，async屬性與defer類似，它們兩者也都只適用于外部腳本，都會告訴瀏覽器立即開始下載，但延遲執(zhí)行，與defer不同的是，標記為async的腳本并不保證能按照它們出現(xiàn)的次序執(zhí)行，比如：
在這里，第二個腳本可能先于第一個腳本執(zhí)行。 5 動態(tài)加載腳本 JavaScript可以使用DOMAPI，所以通過向DOM中動態(tài)添加script元素同樣可以加載指定的腳本。只要創(chuàng)建一個script元素并將其添加到DOM即可。
完畢 |
|
|
