精华内容
下载资源
问答
  • 下面小编就为大家带来一篇JS 动态加载js文件和css文件 同步/异步的两种简单方式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 动态加载js文件

    2017-08-02 00:14:23
    window.onload=function(){ //如果需要加载js文件须在这里面调用文件里的...//动态加载js文件 var flag=true;//如果为true可选择加载js脚本 if(flag){ var script =ducument.createElement("script"); script.type="te
    window.οnlοad=function(){
    //如果需要加载js文件须在这里面调用文件里的方法,可解决同步问题
    	text();//调用引入的js文件里方法
    }
    //动态加载js文件
    var flag=true;//如果为true可选择加载js脚本
    if(flag){
    var script =ducument.createElement("script");
    script.type="text/javascript";
    script.src="需要加载的js文件路径"
    //使用w3c标准添加到head里
    document.getElementsByTagName('head')[0].appendChild(script);
    
    }
    
    
    

    展开全文
  • /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.body; var addheadfile; if(FileType=="js"){ addheadfile= document.createElement...

    方法一

     /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/
    function AddJsFiles(URL,FileType){
        var oHead = document.body;
        var addheadfile;
        if(FileType=="js"){
            addheadfile= document.createElement("script");
            addheadfile.type = "text/javascript";
            addheadfile.src=URL;
        }else{
            addheadfile= document.createElement("link");
            addheadfile.type = "text/css";
            addheadfile.rel="stylesheet";
            addheadfile.rev = "stylesheet";
            addheadfile.media = "screen";
            addheadfile.href=URL;
        }
        oHead.appendChild( addheadfile);
    }
    

    使用

    AddJsFiles("css/index.css","css");
    AddJsFiles("js/index.js","js");
    

    方法二

    经测试发现以上方法进行文件加载时,文件是异步加载的,这样就可能导致加载文件后立即使用文件中的方法或变量会产生错误的情况,
    所以以下采用同步加载的方法,当文件加载完成后再去执行相应的代码或方法

    /*5.加载文件*/
    /* 已加载文件缓存列表,用于判断文件是否已加载过,若已加载则不再次加载*/
    var classcodes =[];
    window.Import={
        /*加载一批文件,_files:文件路径数组,可包括js,css,less文件,succes:加载成功回调函数*/
        LoadFileList:function(_files,succes){
            var FileArray=[];
            if(typeof _files==="object"){
                FileArray=_files;
            }else{
                /*如果文件列表是字符串,则用,切分成数组*/
                if(typeof _files==="string"){
                    FileArray=_files.split(",");
                }
            }
            if(FileArray!=null && FileArray.length>0){
                var LoadedCount=0;
                for(var i=0;i< FileArray.length;i++){
                    loadFile(FileArray[i],function(){
                        LoadedCount++;
                        if(LoadedCount==FileArray.length){
                            succes();
                        }
                    })
                }
            }
            /*加载JS文件,url:文件路径,success:加载成功回调函数*/
            function loadFile(url, success) {
                if (!FileIsExt(classcodes,url)) {
                    var ThisType=GetFileType(url);
                    var fileObj=null;
                    if(ThisType==".js"){
                        fileObj=document.createElement('script');
                        fileObj.src = url;
                    }else if(ThisType==".css"){
                        fileObj=document.createElement('link');
                        fileObj.href = url;
                        fileObj.type = "text/css";
                        fileObj.rel="stylesheet";
                    }else if(ThisType==".less"){
                        fileObj=document.createElement('link');
                        fileObj.href = url;
                        fileObj.type = "text/css";
                        fileObj.rel="stylesheet/less";
                    }
                    success = success || function(){};
                    fileObj.onload = fileObj.onreadystatechange = function() {
                        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
                            success();
                            classcodes.push(url)
                        }
                    }
                    document.getElementsByTagName('head')[0].appendChild(fileObj);
                }else{
                    success();
                }
            }
            /*获取文件类型,后缀名,小写*/
            function GetFileType(url){
                if(url!=null && url.length>0){
                    return url.substr(url.lastIndexOf(".")).toLowerCase();
                }
                return "";
            }
            /*文件是否已加载*/
            function FileIsExt(FileArray,_url){
                if(FileArray!=null && FileArray.length>0){
                    var len =FileArray.length;
                    for (var i = 0; i < len; i++) {
                        if (FileArray[i] ==_url) {
                           return true;
                        }
                    }
                }
                return false;
            }
        }
    }
    
    var FilesArray=["js/index.js","js/ClassInherit1.js","js/highcharts_2.21.js","css/index.css"];
    Import.LoadFileList(FilesArray,function(){
       /*这里写加载完成后需要执行的代码或方法*/
    });
    
    展开全文
  • 动态加载js文件 一.直接加载 &lt;body&gt; &lt;div id="divId"&gt;&lt;/div&gt; &lt;script&gt;  //1.动态创建js  var rootObject=document.getElementById(&...

    动态加载js文件

    一.直接加载

    <body>

    <div id="divId"></div>

    <script>

         //1.动态创建js

         var rootObject=document.getElementById("divId");
         var oScript = document.createElement( "script" );
         oScript.type = "text/javascript";
         oScript.src = test.js; //test.js方法中有一个方法function test(){alert("test");}
         rootObject.appendChild(oScript);

     

         //2.调用js

         test();//在ie中不会出错,在firefox会出错,因为firefox默认为异步加载(在向服务器请求加载test.js文件的同时,继续向下执行了,调用test()方法,就自然找不到这个方法)

    </script>

    </body>

    二.同步加载

    <body>

    <div id="divId"></div>

    <script>

    (function(){

     

    Skip={

    //获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)

    getXmlHttpRequest:function ()
    {
        if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
               return new XMLHttpRequest() ;
        else if ( window.ActiveXObject ) // IE
                return new ActiveXObject("MsXml2.XmlHttp") ;

    },

     

     //导入内容
    includeJsText :function (rootObject,jsText)
           {
            if ( rootObject != null ){
                    var oScript = document.createElement( "script" );
                 oScript.type = "text/javascript";
                //oScript.id = sId;
                //oScript.src = fileUrl;
                //oScript.defer = true;
                oScript.text = jsText;
                rootObject.appendChild(oScript);
                //alert(oScript.text);
            }
           },


     //导入文件
    includeJsSrc :function (rootObject, fileUrl)
          {
            if ( rootObject != null ){
                    var oScript = document.createElement( "script" );
                 oScript.type = "text/javascript";
                oScript.src = fileUrl;
                rootObject.appendChild(oScript);
           }
          },

     

    //同步加载
    addJs:function(rootObject, url){

            var oXmlHttp = this.GetHttpRequest() ;
           
            oXmlHttp.onreadystatechange = function()  //其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
           
            {
                if ( oXmlHttp.readyState == 4 ) //当执行完成以后(返回了响应)所要执行的
           
                {
                    if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) //200有读取对应的url文件,404表示不存在这个文件
           
                    {
           
                        includeJsSrc( rootObject, url);
                    }
           
                    else
           
                    {
                        alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
           
                    }
           
                }

             }
            
             //1.True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
             //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
          oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"></script>',ff不会 
          oXmlHttp.send(null);
          includeJsText(rootObject,oXmlHttp.responseText);
          }
    }

    };
     var rootObject=document.getElementById("divId");

     Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}

    test();//即使马上调用也不会出错了.


    })();

     

    </script>

    </body>

     

    总结:

    1.ie动态加载js文件时,它默认就为同步,可以不用设置同步(也可直调用Skip.includeJsSrc())
    2.ff动态加载js文件时,它默认为异步,要设置成同步,加载完直接调用才不会出错
    3.无论ie还是ff在动态加载js内容时,没有请求服务器,不会存在异步问题
    注:无论ie还是ff在页面加载js时(即执行整个页面),都是为同步的加载,除非设置script的属性defer="true"(此属性好像也只是对ie有效)

    展开全文
  • 1 /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ 2 function AddJsFiles(URL,FileType){ 3 var oHead = document.getElementsByTagName('HEAD').item(0); 4 var addheadfile; 5 if(FileTyp...
     1 /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/
     2 function AddJsFiles(URL,FileType){
     3     var oHead = document.getElementsByTagName('HEAD').item(0);
     4     var addheadfile;
     5     if(FileType=="js"){
     6         addheadfile= document.createElement("script");
     7         addheadfile.type = "text/javascript";
     8         addheadfile.src=URL;
     9     }else{
    10         addheadfile= document.createElement("link");
    11         addheadfile.type = "text/css";
    12         addheadfile.rel="stylesheet";
    13         addheadfile.rev = "stylesheet";
    14         addheadfile.media = "screen";
    15         addheadfile.href=URL;
    16     }
    17     oHead.appendChild( addheadfile);
    18 }
    1  /*方法调用*/
    2     AddJsFiles("js/index.js","js");
    3     AddJsFiles("css/index.css","css");
     
      经测试发现以上方法进行文件加载时,文件是异步加载的,这样就可能导致加载文件后立即使用文件中的方法或变量会产生错误的情况,
    所以以下采用同步加载的方法,当文件加载完成后再去执行相应的代码或方法
     
    /*5.加载文件*/
    /* 已加载文件缓存列表,用于判断文件是否已加载过,若已加载则不再次加载*/
    var classcodes =[];
    window.Import={
        /*加载一批文件,_files:文件路径数组,可包括js,css,less文件,succes:加载成功回调函数*/
        LoadFileList:function(_files,succes){
            var FileArray=[];
            if(typeof _files==="object"){
                FileArray=_files;
            }else{
                /*如果文件列表是字符串,则用,切分成数组*/
                if(typeof _files==="string"){
                    FileArray=_files.split(",");
                }
            }
            if(FileArray!=null && FileArray.length>0){
                var LoadedCount=0;
                for(var i=0;i< FileArray.length;i++){
                    loadFile(FileArray[i],function(){
                        LoadedCount++;
                        if(LoadedCount==FileArray.length){
                            succes();
                        }
                    })
                }
            }
            /*加载JS文件,url:文件路径,success:加载成功回调函数*/
            function loadFile(url, success) {
                if (!FileIsExt(classcodes,url)) {
                    var ThisType=GetFileType(url);
                    var fileObj=null;
                    if(ThisType==".js"){
                        fileObj=document.createElement('script');
                        fileObj.src = url;
                    }else if(ThisType==".css"){
                        fileObj=document.createElement('link');
                        fileObj.href = url;
                        fileObj.type = "text/css";
                        fileObj.rel="stylesheet";
                    }else if(ThisType==".less"){
                        fileObj=document.createElement('link');
                        fileObj.href = url;
                        fileObj.type = "text/css";
                        fileObj.rel="stylesheet/less";
                    }
                    success = success || function(){};
                    fileObj.onload = fileObj.onreadystatechange = function() {
                        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
                            success();
                            classcodes.push(url)
                        }
                    }
                    document.getElementsByTagName('head')[0].appendChild(fileObj);
                }else{
                    success();
                }
            }
            /*获取文件类型,后缀名,小写*/
            function GetFileType(url){
                if(url!=null && url.length>0){
                    return url.substr(url.lastIndexOf(".")).toLowerCase();
                }
                return "";
            }
            /*文件是否已加载*/
            function FileIsExt(FileArray,_url){
                if(FileArray!=null && FileArray.length>0){
                    var len =FileArray.length;
                    for (var i = 0; i < len; i++) {
                        if (FileArray[i] ==_url) {
                           return true;
                        }
                    }
                }
                return false;
            }
        }
    }
    
    var FilesArray=["js/index.js","js/ClassInherit1.js","js/highcharts_2.21.js","css/index.css"];
    Import.LoadFileList(FilesArray,function(){
       /*这里写加载完成后需要执行的代码或方法*/
    });

     


    转载于:https://www.cnblogs.com/luowanli/archive/2012/07/19/2599277.html

    展开全文
  • 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求。 一.直接加载 二、动态创建script元素  var oHead = document....
  • 动态加载js(同步)

    千次阅读 2018-05-28 09:52:10
    1.XMLHttpRequest/ActiveXObject加载(同步)/** * 同步加载js脚本 * @param id 需要设置的&lt;script&gt;标签的id * @param url js文件的相对路径或绝对路径 * @return {Boolean} 返回是否加载成功...
  • 1、动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js、css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式...
  • 同步异步动态引入js文件

    千次阅读 2016-04-14 10:48:07
    动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 一.异步加载,并发执行,但引入js内容不能直接...
  • 动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id=divId></div> [removed] 二.异步加载,并发...
  • 传统上,加载Javascript文件都是使用[removed]标签。 就像下面这样: [removed][removed] [removed]标签很方便,只要加入网页,浏览器就会读取并运行。...浏览器采用”同步模式”加载[removed]标签,也就
  • js文件动态加载

    2009-09-28 15:24:00
    花了好长时间写js文件加载动态添加script标签指定url是不可行的。使用ajax要指定回调方法,如果加载多个文件就要指定多个回调方法,一个方法又套一个方法,实现不爽。终于找出了同步加载的方法,并写出了一个js...
  • 动态加载js文件有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求一.直接加载<div id="divId"></div><script>一....
  • 在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析。这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内容的...
  • 最近因为工作需要做了一个js自动导入的...靠~~悲催了,就是说js如果动态加载(非浏览器加载因为浏览器加载时同步加载的会等待前一个js加载完成后才进行下一个js加载,这样就不会出现问题)那加载的文件是异步进行的...
  • 动态加载js的问题

    2015-03-09 09:23:00
    (1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即...浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加...
  • Js动态导入js文件

    2014-09-09 10:35:34
    var plugin = [ "lib/plugin/jquery.lazyload.min.js", "js/common.js", ... //可动态加载css,js文件,支持同步和异步 include: function(file,sync) { //sync判断同步还是异步, true为同步, F
  • js动态加载脚本

    千次阅读 2013-03-13 21:57:40
    * 同步加载js脚本 * @param id 需要设置的标签的id * @param url js文件的相对路径或绝对路径 * @return {Boolean} 返回是否加载成功,true代表成功,false代表失败 */ function loadJS(id,url){ var ...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 148
精华内容 59
关键字:

同步动态加载js文件