使用js加載器動態加載外部Javascript文件

本文轉載自查看原文 2016-12-22 11:23 3079

原文：http://www.cnblogs.com/xdp-gacl/p/3927417.html

今天在網上找到了一個可以動態加載js文件的js加載器，具體代碼如下：

JsLoader.js

var MiniSite=new Object();
/**
 * 判斷瀏覽器
 */
MiniSite.Browser={   
    ie:/msie/.test(window.navigator.userAgent.toLowerCase()),   
    moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),   
    opera:/opera/.test(window.navigator.userAgent.toLowerCase()),   
    safari:/safari/.test(window.navigator.userAgent.toLowerCase())   
};
/**
 * JsLoader對象用來加載外部的js文件
 */
MiniSite.JsLoader={
    /**
     * 加載外部的js文件
     * @param sUrl 要加載的js的url地址
     * @fCallback js加載完成之后的處理函數
     */
    load:function(sUrl,fCallback){   
        var _script=document.createElement('script');   
        _script.setAttribute('charset','gbk');   
        _script.setAttribute('type','text/javascript');   
        _script.setAttribute('src',sUrl);   
        document.getElementsByTagName('head')[0].appendChild(_script);   
        if(MiniSite.Browser.ie){   
            _script.onreadystatechange=function(){   
                if(this.readyState=='loaded'||this.readyStaate=='complete'){ 
                    //fCallback();
                    if(fCallback!=undefined){
                         fCallback(); 
                    }
                     
                }   
            };   
        }else if(MiniSite.Browser.moz){   
            _script.onload=function(){   
                //fCallback(); 
                if(fCallback!=undefined){
                        fCallback(); 
                }
            };   
        }else{   
            //fCallback();
            if(fCallback!=undefined){
                    fCallback(); 
            }
        }   
    }   
};

JsLoader.js測試

<!DOCTYPE HTML>
<html>
  <head>
  <!--引入js加載器  -->
   <script type="text/javascript" src="js/JsLoader.js"></script>
    <title>JsLoaderTest.html</title>
    <script type="text/javascript">
        if(MiniSite.Browser.ie){
            //動態加載Js
            MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){
                alert("動態加載的是jquery-1.9.1.js");
                $(function(){
                    alert("jquery-1.9.1.js動態加載完成之后做的處理操作");
                });
            });   
        }else{
            MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
                alert("動態加載的是jquery-2.0.3.js");
                $(function(){
                    alert("jquery-2.0.3.js動態加載完成之后做的處理操作");
                });
            });
        }
    </script>
  </head>
  
  <body>
   
  </body>
</html>

測試結果如下：

IE瀏覽器下測試結果：

google瀏覽器下的測試結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用js加載器動態加載外部Javascript文件使用js加載器動態加載外部js、css文件 JavaScript動態加載CSS和JS文件【JS】【9】使用jQuery動態加載js文件動態加載js文件 Vue 加載外部js文件動態加載js文件 js怎么動態加載js文件（JavaScript性能優化篇）使用jquery動態加載javascript以減少服務器壓力如何使用 Chrome 瀏覽器調試動態加載的 Javascript 腳本