1. 程式人生 > >動態載入javascript檔案

動態載入javascript檔案

動態載入javascript?

很俗的一個題目,如果你已經知道如何動態載入外部javascript,那麼你可以跳過這篇文章繼續閱讀其它的。如果你還不知道怎樣動態載入外部javascript檔案的話,請耐心的繼續閱讀。
什麼時候會用到動態載入javascript檔案的技術呢?其實很多的時候都有可以用到,比如從伺服器端生成javascript指令碼,但是用到動態載入javascript檔案主要是因為前端和後端資料的互動(至少哥會在這個時候用到)。
前幾天在修改移動版支付寶時,就使用了動態載入javascript檔案。
記住,這裡說的動態載入js檔案是指利用js動態載入js檔案,並非是伺服器生成。

如何建立動態載入外部javascript的指令碼呢?非常簡單

 var script = document.createElement('script');//建立script標籤  
 script.src = 'http://mgw.alipay.com/choosePhone.htm?' 
          + (new Date()).getTime().toString().substring(0,8);  
 script.type = "text/javascript";  
 script.characterSet = 'utf-8';  
 //相容IE和DOM標籤的script onload事件
 script.onload = script.onreadystatechange = function(){       
 if (!this.readyState 
   || this.readyState == 'loaded' 
   || this.readyState == 'complete') {          
      alert(malipayBrands.length); 
}
} 



請注意以上程式碼中的script.onload = script.onreadystatechange = function (){},其中onload用於DOM標籤的瀏覽器,onreadystatechange用於IE。

最後在head中插入我們的script

document.getElementsByTagName('head')[0].appendChild(script);  


在國外已經有一個封裝好的loadScript.js,程式碼如下:

function loadScript(url, callback){  
         var f = arguments.callee;  
         if (!("queue" in f))  
             f.queue = {};  
         var queue = f.queue;  
         if (url in queue) { // script is already in the document  
             if (callback) {  
                 if (queue[url]) // still loading  
                     queue[url].push(callback);  
                 else // loaded  
                      callback();  
             }  
             return;  
         }  
         queue[url] = callback ? [callback] : [];  
         var script = document.createElement("script");  
         script.type = "text/javascript";  
         script.onload = script.onreadystatechange = function(){  
             if (script.readyState && script.readyState != "loaded" 
                && script.readyState != "complete")  
                 return;  
             script.onreadystatechange = script.onload = null;  
             while (queue[url].length)  
                 queue[url].shift()();  
             queue[url] = null;  
         };  
         script.src = url;  
         document.getElementsByTagName("head")[0].appendChild(script);  
} 


轉載自: http://huanyq2008.iteye.com/admin/blogs/850740