动态加载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