動態加載JS腳本

創建dynamic.js文件，表示動態加載的js文件，裏面的內容爲：

function dynamicJS() {

alert("加載完畢");

} 

以下方法中的html頁面和dynamic.js文件在一個目錄下。 

一. document.write()

<! DOCTYPE html >
< html  lang ="en" >
< head >
     < meta  charset ="UTF-8" >
     < title >Dynamic load JS </ title >
     < script >
         function init() {
            document.write('<script src="dynamic.js"><\/script>');
            document.write('<input type="button" onclick="load();" value="加載完畢" \/>');
        }
        dynamicJS();  // 此處報錯，因爲dynamic.js文件還未加載完畢

         function load() {
            dynamicJS();
        }
     </ script >
</ head >
< body >
     < input  type ="button"  onclick ="init();"  value ="初始化加載"   />
     <!-- <input type="button" onclick="load();" value="加載完畢"> --> 
</ body >
</ html >

View Code

問題,1，document.write會重寫頁面，在點擊初始化加載按鈕後，頁面重繪致使原有的內容丟失，上述代碼中註釋掉的」加載完畢「按鈕會丟失，所以須要在init函數中使用document.write的方式創建一個按鈕。

問題2，異步加載，直接調用dynamicJS方法會報錯，由於js文件未加載完畢，而在其後的代碼已經開始運行。

綜上，此種方法不推薦。

二. 動態改變已有script的src屬性

<! DOCTYPE html >
< html  lang ="en" >

< head >
     < meta  charset ="UTF-8" >
     < title >Dynamic load JS </ title >
     < script  id ="abc"  src ="" ></ script >
     < script >
     function init() {
        abc.src = "dynamic.js";
        dynamicJS();  // 此處調用報錯，因爲還未加載完畢
    }

     function load() {
        dynamicJS();
    }
     </ script >
</ head >

< body >
     < input  type ="button"  onclick ="init();"  value ="初始化加載"   />
     < input  type ="button"  onclick ="load();"  value ="加載完畢" >
</ body >

</ html >

View Code

這個代碼運行起來有問題，點擊」加載完畢「按鈕仍是報"Uncaught ReferenceError: dynamicJS is not defined"

問題：異步加載問題

三. 動態建立script元素

<! DOCTYPE html >
< html  lang ="en" >

< head >
     < meta  charset ="UTF-8" >
     < title >Dynamic load JS </ title >
     < script >
     function init() {
         var myScript = document.createElement('script');
        myScript.src = 'dynamic.js';
        document.body.appendChild(myScript);
        
        dynamicJS();  // 此處調用報錯，因爲還未加載完畢
    }

     function load() {
        dynamicJS();
    }
     </ script >
</ head >

< body >
     < input  type ="button"  onclick ="init();"  value ="初始化加載"   />
     < input  type ="button"  onclick ="load();"  value ="加載完畢" >
</ body >

</ html >

View Code

問題：相對於第二種方式，不須要在頁面上一開始就添加script元素，但一樣存在異步加載問題。

前三種方法共同點：異步執行，加載這些腳本的同時，主頁面的腳本繼續運行。若此時調用未加載完成的JS中的代碼，會報錯。

四. XMLHttpRequest/ActiveXObject 同步加載

<! DOCTYPE html >
< html  lang ="en" >

< head >
     < meta  charset ="UTF-8" >
     < title >Dynamic load JS </ title >
     < script >
     function init() {
        ajaxPage('abc', 'dynamic.js');
        dynamicJS();
    }

     function ajaxPage(sId, url) {
         var xhr = window.XMLHttpRequest ?  new XMLHttpRequest() :  new ActiveXObject();
        xhr.open('GET', url,  false);    // 同步加載
        xhr.send( null);
         //  xhr.onreadystatechange = function() {
             if(xhr.readyState == 4) {
                 // 0表明訪問本地資源，200表明訪問服務器成功，304表明沒作修改，訪問緩存
                 if(xhr.status == 200 || xhr.status == 0 || xhr.status == 304 ) {
                    includeJS(sId, xhr.responseText);
                }
            }
         //  }
    }

     function includeJS(sId, source) {
         if(source !=  null && (!document.getElementById(sId))) {
             var myHead = document.getElementsByTagName('head')[0];
             var myScript = document.createElement('script');
            myScript.id = sId;
             try {
                myScript.appendChild(document.createTextNode(source));
            }  catch(ex) {
                myScript.text = source;
            }

            myHead.appendChild(myScript);
        }
    }
    
     </ script >
</ head >

< body >
     < input  type ="button"  onclick ="init();"  value ="測試按鈕"   />
</ body >

</ html >

View Code

 

參考連接：http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html