動態載入JavaScript檔案的兩種方法

NO IMAGE

這篇文章主要為大家詳細介紹了動態載入JavaScript檔案的兩種方法,感興趣的小夥伴們可以參考一下
第一種便是利用ajax方式,把script檔案程式碼從背景載入到前臺,而後對載入到的內容經過eval()實施程式碼。第二種是,動靜建立一個script標籤,配置其src屬性,經過把script標籤插入到頁面head來載入js,相當於正在head中寫了一個<script src=”…”></script>,只可是這個script標籤是用js動靜建立的
比喻說是我們要動靜地載入一個callbakc.js,我們就必要多麼一個script標籤:
程式碼如下:  複製程式碼 程式碼如下:<script type=”text/javascript” src=”call.js”></script>

如下程式碼就是如何通過js來建立這個標籤(並且加到head中): 
程式碼如下:


var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script); 

當載入完call.js, 我們就要呼叫其中的方法。不過在header.appendChild(script)之後我們不能馬上呼叫其中的js。因為瀏覽器是非同步載入這個js的,我們不知道他什麼時候載入完。然而我們可以通過監聽事件的辦法來判斷helper.js是否載入完成。(假設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);

我設了2個事件監聽函式, 因為在ie中使用onreadystatechange, 而gecko,webkit 瀏覽器和opera都支援onload。事實上this.readyState == ‘complete’並不能工作的很好,理論上狀態的變化是如下步驟:
1.uninitialized
2.loading
3.loaded
4.interactive
5.complete
但是有些狀態會被跳過。根據經驗在ie7中,只能獲得loaded和completed中的一個,不能都出現,原因也許是對判斷是不是從cache中讀取影響了狀態的變化,也可能是其他原因。最好把判斷條件改成this.readyState == ‘loaded’ || this.readyState == ‘complete’

參考jQuery的實現我們最後實現為: 程式碼如下: 


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()的呼叫寫在helper.js的最後,那麼可以保證在helper.js在載入完後能自動呼叫help(),當然最後還要能這樣是不是適合你的應用。

另外需要注意:

1.因為script標籤的src可以跨域訪問資源,所以這種方法可以模擬ajax,解決ajax跨域訪問的問題。
2.如果用ajax返回的html程式碼中包含script,則直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原始碼,jQuery也是先解析傳入的引數,剝離其中的script程式碼,動態建立script標籤,所用jQuery的html方法新增進dom的html如果包含script是可以執行的。如:  
 複製程式碼 程式碼如下:jQuery(“#content”).html(“<script>alert(‘aa’);<\/script>”);

以上就是動態載入JavaScript檔案的方法,希望對大家的學習有所幫助。

您可能感興趣的文章:

學習javascript檔案載入優化理解Javascript檔案動態載入JS 動態載入js檔案和css檔案 同步/非同步的兩種簡單方式JS載入器如何動態載入外部js檔案動態載入js、css的簡單實現程式碼動態載入js、css的例項程式碼動態載入js檔案簡單示例jquery及js實現動態載入js檔案的方法如何動態載入外部Javascript檔案js實現動態載入指令碼的方法例項彙總不使用script匯入js檔案的幾種方法