一、在HTML中嵌入Javasript的方法
- 直接在Javascript代碼放在標記對<script>和</script>之間
- 由<script />標記的src屬性制定外部的js文件
- 放在事件處理程序中,比如:
<p onclick="alert("我是由onclick事件執行的Javascript")">點擊我</p>
- 作爲URL的主體,這個URL使用特殊的Javascript:協議,比如:
<a href="javascript:alert("我是由javascript:協議執行的javascript")">點擊我</a>
- 利用javascript本身的document.write()方法寫入新的javascript代碼
- 利用Ajax異步獲取javascript代碼,然後執行
第3種和第4種方法寫入的Javascript需要觸發才能執行,所以除非特別設置,否則頁面加載時不會執行。
二、Javascript在頁面的執行順序
- 頁面上的Javascript代碼是HTML文檔的一部分,所以Javascript在頁面裝載時執行的順序就是其引入標記<script />的出現順序, <script />標記裏面的或者通過src引入的外部JS,都是按照其語句出現的順序執行,而且執行過程是文檔裝載的一部分。
- 每個腳本定義的全局變量和函數,都可以被後面執行的腳本所調用。
- 變量的調用,必須是前面已經聲明,否則獲取的變量值是undefined。
<script type="text/javscrpt">//<![CDATA[alert(tmp); var tmp = 1;alert(tmp); //]]></script>
- 同一段腳本,函數定義可以出現在函數調用的後面,但是如果是分別在兩段代碼,且函數調用在第一段代碼中,則會報函數未定義錯誤。
<script type="text/javscrpt">//<![CDATA[aa(); //]]></script><script type="text/javscrpt">//<![CDATA[aa();function aa(){alert(1);}//]]></script>
- document.write()會把輸出寫入到腳本文檔所在的位置,瀏覽器解析完documemt.write()所在文檔內容後,繼續解析document.write()輸出的內容,然後在繼續解析HTML文檔。
<script type="text/javascript">//<![CDATA[ document.write("<script type=/"text/javascript/" src=/"test.js/" temp_src=/"test.js/"><//script>"); document.write("<script type=/"text/javascript/">"); document.write("alert(2);") document.write("alert(/"我是/" + tmpStr);"); document.write("<//script>"); //]]></script> <script type="text/javascript">//<![CDATA[ alert(3); //]]></script>
test.js的內容是:
var tmpStr = 1; alert(tmpStr);
- 在Firefox和Opera中的彈出值的順序是:1、2、我是1、3
- 在IE中彈出值的順序是:2、1、3,同時瀏覽器報錯:tmpStr未定義
原因可能是IE在document.write時,並未等待加載SRC中的Javascript代碼完畢後,才執行下一行,所以導致2先彈出,並且執行到document.write(’document.write(/"我是/" + tmpStr)’)調用tmpStr時,tmpStr並未定義,從而報錯。
解決這個問題,可以利用HTML解析是解析完一個HTML標籤,再執行下一個的原理,把代碼拆分來實現:
<script type="text/javascript">//<![CDATA[ document.write("<script type=/"text/javascript/" src=/"test.js/" temp_src=/"test.js/"><//script>"); //]]></script> <script type="text/javascript">//<![CDATA[ document.write("<script type=/"text/javascript/">"); document.write("alert(2);") document.write("alert(/"我是/" + tmpStr);"); document.write("<//script>"); //]]></script> <script type="text/javascript">//<![CDATA[ alert(3); //]]></script>
這樣IE下和其他瀏覽器輸出值的順序都是一直的了:1、2、我是1、3。
三、如何改變Javascript在頁面的執行順序
- 利用onload
<script type="text/javascript">//<![CDATA[window.onload = f;function f(){alert(1);}alert(2);//]]></script>
輸出值順序是 2、1。
需要注意的是,如果存在多個winodws.onload的話,只有最有一個生效,解決這個辦法是:
window.onload = function(){f();f1();f2();.....}
利用2級DOM事件類型
if(document.addEventListener){window.addEventListener("load",f,false);window.addEventListener("load",f1,false);...}else{window.attachEvent("onload",f);window.attachEvent("onload",f1);...}
- IE中可以利用deferdefer作用是把代碼加載下來,並不立即執行,等文檔裝載完畢之後再執行,有點類似onload,但是沒有onload那樣的侷限性,可以重複使用,但是隻在IE中有效,所以上面的例子可以修改成爲
<script type="text/javascript">//<![CDATA[document.write("<script type=/"text/javascript/" src=/"test.js/" temp_src=/"test.js/"><//script>");document.write("<script type=/"text/javascript/" defer=/"defer/">");document.write("alert(2);")document.write("alert(/"我是/" + tmpStr);");document.write("<//script>");//]]></script><script type="text/javascript">//<![CDATA[alert(3);//]]></script>
這樣IE就不報錯了,輸出值的順序變成:1、3、2、我是1
- 利用Ajax。
因爲xmlhttpRequest能判斷外部文檔加載的狀態,所以能夠改變代碼的加載順序。