一、在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); //輸出undefined
var tmp = 1;
alert(tmp); //輸出1
//]]></script>
同一段腳本,函數定義可以出現在函數呼叫的後面,但是如果是分別在兩段程式碼,且函數呼叫在第一段程式碼中,則會報函數未定義錯誤。
<script type="text/javscrpt">//<![CDATA[
aa(); //瀏覽器報錯
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //輸出1
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"></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"></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中可以利用defer,defer作用是把程式碼載入下來,並不立即執行,等文件裝載完畢之後再執行,有點類似window.onload,但是沒有window.onload那樣的局限性,可以重複使用,但是只在IE中有效,所以上面的範例可以修改成為
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" 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
當HTML解析器遇到一個腳本,它必須按常規終止對文檔的解析並等待腳本執行。為了解決這個問題HTML4標準定義了defer。透過defer來提示瀏覽器可以繼續解析HTML文檔,並延遲執行腳本。這種延遲在腳本從外部文件載入時非常有用,讓瀏覽器不必等待外部文件全部載入之後才繼續執行,能有效的提高效能。 IE是目前唯一支援defer屬性的瀏覽器,但IE並沒有正確的實作了defer屬性,因為延遲的腳本總是被延遲,直到文件結束,而不是只延遲到下一個非延遲的腳本。這意味著,IE中延遲的腳本的執行順序相當混亂,並且不能定義任何後面非延遲腳本並須的函數和變數。在IE中所有的defer的腳本執行時間應該都是HTML文檔樹建立以後,window.onload之前。
利用Ajax。
因為xmlhttpRequest能判斷外部文檔載入的狀態,所以能夠改變程式碼的載入順序。