第一種利用ajax方式，第二種是動靜創(chuàng)建一個script標(biāo)簽，配置其src屬性，經(jīng)過把script標(biāo)簽拔出到頁面head來加載js，感樂趣的網(wǎng)友可以看下

這篇文章主要為大家詳細(xì)介紹了動態(tài)加載JavaScript文件的兩種方法，感興趣的小伙伴們可以參考一下

第一種便是利用ajax方式，把script文件代碼從背景加載到前臺，而后對加載到的內(nèi)容經(jīng)過eval()實(shí)施代碼。第二種是，動靜創(chuàng)建一個script標(biāo)簽，配置其src屬性，經(jīng)過把script標(biāo)簽插入到頁面head來加載js，相當(dāng)于正在head中寫了一個<script src="..."></script>,只可是這個script標(biāo)簽是用js動靜創(chuàng)建的

比喻說是我們要動靜地加載一個callbakc.js，我們就必要多么一個script標(biāo)簽：

代碼如下:

<script type="text/javascript" src="call.js"></script>

如下代碼就是如何通過js來創(chuàng)建這個標(biāo)簽（并且加到head中）：

代碼如下:

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript';

script.src= 'call.js';

head.appendChild(script);

當(dāng)加載完call.js， 我們就要調(diào)用其中的方法。不過在header.appendChild(script)之后我們不能馬上調(diào)用其中的js。因?yàn)闉g覽器是異步加載這個js的，我們不知道他什么時候加載完。然而我們可以通過監(jiān)聽事件的辦法來判斷helper.js是否加載完成。（假設(shè)call.js中有一個callback方法）

代碼如下:

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript';

script.onreadystatechange= function () {

if (this.readyState == 'complete')

callback();

}

script.onload= function(){

callback();

}

script.src= 'helper.js';

head.appendChild(script);

我設(shè)了2個事件監(jiān)聽函數(shù)， 因?yàn)樵趇e中使用onreadystatechange, 而gecko,webkit 瀏覽器和opera都支持onload。事實(shí)上this.readyState == 'complete'并不能工作的很好，理論上狀態(tài)的變化是如下步驟：

1.uninitialized

2.loading

3.loaded

4.interactive

5.complete

但是有些狀態(tài)會被跳過。根據(jù)經(jīng)驗(yàn)在ie7中，只能獲得loaded和completed中的一個，不能都出現(xiàn)，原因也許是對判斷是不是從cache中讀取影響了狀態(tài)的變化，也可能是其他原因。最好把判斷條件改成this.readyState == 'loaded' || this.readyState == 'complete'

參考jQuery的實(shí)現(xiàn)我們最后實(shí)現(xiàn)為：

代碼如下:

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript';

script.onload = script.onreadystatechange = function() {

if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {

help();

// Handle memory leak in IE

script.onload = script.onreadystatechange = null;

} };

script.src= 'helper.js';

head.appendChild(script);

還有一種簡單的情況就是可以把help()的調(diào)用寫在helper.js的最后，那么可以保證在helper.js在加載完后能自動調(diào)用help(),當(dāng)然最后還要能這樣是不是適合你的應(yīng)用。

另外需要注意：

1.因?yàn)閟cript標(biāo)簽的src可以跨域訪問資源,所以這種方法可以模擬ajax，解決ajax跨域訪問的問題。

2.如果用ajax返回的html代碼中包含script，則直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原代碼，jQuery也是先解析傳入的參數(shù)，剝離其中的script代碼，動態(tài)創(chuàng)建script標(biāo)簽，所用jQuery的html方法添加進(jìn)dom的html如果包含script是可以執(zhí)行的。如：

代碼如下:

jQuery("#content").html("<script>alert('aa');<\/script>");

以上就是動態(tài)加載JavaScript文件的方法，希望對大家的學(xué)習(xí)有所幫助。