快捷導(dǎo)航

動(dòng)態(tài)加載script文件的兩種方法

更新時(shí)間：2013年08月15日 19:27:28 作者：

第一種就是利用ajax方式，第二種是，動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，設(shè)置其src屬性，通過(guò)把script標(biāo)簽插入到頁(yè)面head來(lái)加載js，感興趣的朋友可以了解下

動(dòng)態(tài)加載script到頁(yè)面大約有倆方法

第一種就是利用ajax方式，把script文件代碼從后臺(tái)加載到前臺(tái)，然后對(duì)加載到的內(nèi)容通過(guò)eval()執(zhí)行代碼。第二種是，動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，設(shè)置其src屬性，通過(guò)把script標(biāo)簽插入到頁(yè)面head來(lái)加載js，相當(dāng)于在head中寫(xiě)了一個(gè)<script src="..."></script>,只不過(guò)這個(gè)script標(biāo)簽是用js動(dòng)態(tài)創(chuàng)建的
比如說(shuō)是我們要?jiǎng)討B(tài)地加載一個(gè)callbakc.js，我們就需要這樣一個(gè)script標(biāo)簽：

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

 
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個(gè)事件監(jiān)聽(tīng)函數(shù)，因?yàn)樵趇e中使用onreadystatechange, 而gecko,webkit 瀏覽器和opera都支持onload。事實(shí)上this.readyState == 'complete'并不能工作的很好，理論上狀態(tài)的變化是如下步驟：
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete
但是有些狀態(tài)會(huì)被跳過(guò)。根據(jù)經(jīng)驗(yàn)在ie7中，只能獲得loaded和completed中的一個(gè)，不能都出現(xiàn)，原因也許是對(duì)判斷是不是從cache中讀取影響了狀態(tài)的變化，也可能是其他原因。最好把判斷條件改成this.readyState == 'loaded' || this.readyState == 'complete'

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

復(fù)制代碼代碼如下:

 
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); 

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

另外需要注意：

1.因?yàn)閟cript標(biāo)簽的src可以跨域訪(fǎng)問(wèn)資源,所以這種方法可以模擬ajax，解決ajax跨域訪(fǎng)問(wèn)的問(wèn)題。
2.如果用ajax返回的html代碼中包含script，則直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原代碼，jQuery也是先解析傳入的參數(shù)，剝離其中的script代碼，動(dòng)態(tài)創(chuàng)建script標(biāo)簽，所用jQuery的html方法添加進(jìn)dom的html如果包含script是可以執(zhí)行的。如：

復(fù)制代碼代碼如下:

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

您可能感興趣的文章: