javascript动态加载js文件,在加载完成后执行回调函数

2014-07-30 09:12

动态加载javascript文件,在加载完成时执行callback函数


在很多场景下需要动态加载javascript文件,这样根据需要加载javascript可以减少网络传输量。


下面的loadScript函数可以动态加载javascript文件,并在加载完成后执行事件。


function loadScript(sScriptSrc,callbackfunction)  

{  

   //gets document head element  

   var oHead = document.getElementsByTagName('head')[0];  

   if(oHead)  

   {  

       //creates a new script tag        

       var oScript = document.createElement('script');  


       //adds src and type attribute to script tag  

       oScript.setAttribute('src',sScriptSrc);  

       oScript.setAttribute('type','text/javascript');  


       //calling a function after the js is loaded (IE)  

       var loadFunction = function()  

           {  

               if (this.readyState == 'complete' || this.readyState == 'loaded')  

               {  

                   callbackfunction();  

               }  

           };  

       oScript.onreadystatechange = loadFunction;  


       //calling a function after the js is loaded (Firefox)  

       oScript.onload = callbackfunction;  


       //append the script tag to document head element          

       oHead.appendChild(oScript);  

   }  

}  


调用方法如下


var SuccessCallback = function(){  

   fnInsideDynamicJs();  

}  


<input type="button" onclick="loadScript('/js/requiredjsfile.js',SuccessCallback)" />


在点击按钮时会自动加载js文件,在加载完成后会执行SuccessCallback函数。

^