動態加載JavaScript文件的方法有哪些

本篇內容介紹了“動態加載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文件的方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！