精华内容
下载资源
问答
  • 动态加载js文件

    2021-04-19 23:37:50
    在日常开发中有很多时候需要动态加载js文件的场景,先看代码再看例子。 /** * 动态加载js文件 * @params {String} url 动态加载js文件路径 * @params {Funtion} callback 加载完js文件之后的回调 * @params {...

    在日常开发中有很多时候需要动态加载js文件的场景,先看代码再看例子。

    /**
     * 动态加载js文件
     * @params {String} url 动态加载js文件路径
     * @params {Funtion} callback 加载完js文件之后的回调
     * @params {String} id 动态加载js文件的script标签的id
     * @params {Object} parent 动态加载js文件的script标签放在哪个父元素下,默认值为document.body
     */
    function loadScript(url, callback, id, parent) {
      let parentDom = document.body
      parent && (parentDom = parent)
      if (id && parentDom.querySelector(`#${id}`)) {
        callback && callback()
      } else {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.async = 'async'
        script.src = url
        id && (script.id = id)
        parentDom.appendChild(script)
        if (script.readyState) {   //IE
          script.onreadystatechange = function() {
            if (script.readyState == 'complete' || script.readyState == 'loaded') {
              script.onreadystatechange = null
              callback && callback()
            }
          }
        } else {    // 非IE
          script.onload = function() {
            callback && callback()
          }
        }
      }
    }
    

    再看例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <button id="button">加载js</button>
      <script>
        document.querySelector('#button').addEventListener('click', () => {
          console.log(123)
          loadScript('https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js', () => {
            console.log('loadScript')
          }, 'abc')
          console.log(456)
        })
    
        /**
         * 动态加载js文件
         * @params {String} url 动态加载js文件路径
         * @params {Funtion} callback 加载完js文件之后的回调
         * @params {String} id 动态加载js文件的script标签的id
         * @params {Object} parent 动态加载js文件的script标签放在哪个父元素下,默认值为document.body
         */
        function loadScript(url, callback, id, parent) {
          let parentDom = document.body
          parent && (parentDom = parent)
          if (id && parentDom.querySelector(`#${id}`)) {
            callback && callback()
          } else {
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = 'async'
            script.src = url
            id && (script.id = id)
            parentDom.appendChild(script)
            if (script.readyState) {   //IE
              script.onreadystatechange = function() {
                if (script.readyState == 'complete' || script.readyState == 'loaded') {
                  script.onreadystatechange = null
                  callback && callback()
                }
              }
            } else {    // 非IE
              script.onload = function() {
                callback && callback()
              }
            }
          }
        }
      </script>
    </body>
    </html>
    

    点击两次 加载js 按钮,第一次会进行jquery.js文件加载,加载完毕之后执行回调,第二次的时候,jquery.js文件已经存在,则直接执行回调函数。
    两次点击的打印内容

    展开全文
  • 动态加载JS文件

    2019-02-17 00:01:29
     * 动态加载JS文件,  * @return {}  */ var JsLoader = function(config) {  return {  /**  * 动态加载.js文件。当全部文件加载完后,执行回调函数。  * 如果文件加载顺序很重要,则需要设置preserveOrder...

    /**
     * 动态加载JS文件,
     * @return {}
     */
    var JsLoader = function(config) {

     return {
      /**
       * 动态加载.js文件。当全部文件加载完后,执行回调函数。
       * 如果文件加载顺序很重要,则需要设置preserveOrder参数为true
       * @param {Array} 文件名称列表
       * @param {Function} 全部文件加载完后,需要执行的回调函数
       * @param {Object}  作用域
       * @param {Boolean} 是否顺序加载,即加载完一个文件后,再加载下一个,true则顺序加载,默认为false。
       */
      load : function(fileList, callback, scope, preserveOrder) {
       var scope = scope || this, head = document
         .getElementsByTagName("head")[0], fragment = document
         .createDocumentFragment(), numFiles = fileList.length, loadedFiles = 0, me = this;

       /**
        * preservOrder为true,才会执行该方法。
        * 根据文件下标逐个加载文件
        */
       var loadFileIndex = function(index) {
        head.appendChild(me.buildScriptTag(fileList[index],
            onFileLoaded));
       };

       /**
        * 当每个文件加载完后,需要执行的回调函数
        */
       var onFileLoaded = function() {
        loadedFiles++;

        //如果是最后一个文件,执行回调函数,否则加载下一个文件
        if (numFiles == loadedFiles && typeof callback == 'function') {
         callback.call(scope);
        } else {
         if (preserveOrder === true) {
          loadFileIndex(loadedFiles);
         }
        }
       };
       //如果是按顺序加载,则直接执行loadFileIndex,否则循环加载文件列表
       if (preserveOrder === true) {
        loadFileIndex.call(this, 0);
       } else {
        //load each file (most browsers will do this in parallel)
        for (var index = 0; index < numFiles; index++) {
         fragment.appendChild(this.buildScriptTag(fileList[index],
             onFileLoaded));
        }
        head.appendChild(fragment);
       }
      },

      /**
       * @private
       * 创建并返回一个scipt标签
       * @param {String/Object} 创建script标签文件对象信息对象或者文件名
       * @param {Function} 可选,当文件加载完后,执行该回调函数
       * @return {Element} The new script ta
       */
      buildScriptTag : function(file, callback) {
       var script = document.createElement('script');
       script.type = "text/javascript";
       script.src = file["url"]||file;
       script.id = file["id"]||file["url"]||file;

       //判断浏览器种类,目前只判断IE、FireFox
       if (script.readyState) {
        script.onreadystatechange = function() {
         if (script.readyState == "loaded"
           || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
         }
        };
       } else {
        script.onload = callback;
       }

       return script;
      },
      /**
       *@private
       * 根据id删除script标签
       * @param {String} script标签的id
       * @param {Function} 这个参数为可选,如果需要删除script标签,需要动作则执行该回调函数。
       * 例如:释放内存等。
       */
      removeScriptTag : function(id, callback) {
       var existing = doc.getElementById(id);
       if (existing) {
        existing.parentNode.removeChild(existing);
       }
       callback();
      }
     }
    }

     

    /**
     * CUSTOM : 系统中自定义的一些方法与构造
     */
    if(typeof(CUSTOM)=="undefined"){
     CUSTOM = {
      //该系统所需要用到的文件分类
      allFiles:{
       //基础文件
       baseFile:{
        cssFile:[
         '/tydw-etl/extjs/resources/css/ext-all.css',
         '/tydw-etl/extjs/resources/css/feed-viewer.css',
         '/tydw-etl/extjs/resources/css/iconcss.css',
         '/tydw-etl/temp/ext-3.1.1/ux/css/ColumnHeaderGroup.css', //表头
         '/tydw-etl/css/common.css'
         ],
        jsFile:[
        /**
         * 需要注意的是,其它的很多功能使用的是extjs3.1.1
         * 如果要单开日志页面 ,这里请使用3.3.1这个版本(到时候再重写一个加载文件,根据不同页面可能需要使用不同的版本)
         * 另: 3.1.1在IE中无法单独使用 Ext.QuickTips.init
         */
         //'/tydw-etl/extjs3.3.1/adapter/ext/ext-base.js',
         //'/tydw-etl/extjs3.3.1/ext-all-debug.js',
         '/tydw-etl/extjs/adapter/ext/ext-base.js',
         '/tydw-etl/extjs/adapter/ext/ext-all-debug.js',
         '/tydw-etl/scripts/main/ext-extend.js',
         '/tydw-etl/extjs/adapter/ext/ext-lang-zh_CN.js',
         '/tydw-etl/temp/ext-3.1.1/ux/CheckColumn.js',  //这个需要使用高版本(3.3.1)的插件
         '/tydw-etl/temp/ext-3.1.1/ux/ColumnHeaderGroup.js',
         '/tydw-etl/scripts/sys/myajax.js',
         '/tydw-etl/scripts/sys/checkUpdate.js',
         '/tydw-etl/jsp/yjpt/basic/common_yjpt.js'
        ]},
       //Portal文件
       portalFile:{
        cssFile:[
         "/tydw-etl/temp/ext-3.1.1/ux/css/Portal.css",
         "/tydw-etl/jquery/bootstrap/css/table.css"
        ],
        jsFile:[
         "/tydw-etl/temp/ext-3.1.1/examples/ux/Portal.js",
         "/tydw-etl/temp/ext-3.1.1/ux/PortalColumn.js",
         "/tydw-etl/temp/ext-3.1.1/ux/Portlet.js"
        ]
       },
       //图表文件
       highChartsFile:{
        cssFile:[
        ],
        jsFile:[
         "/tydw-etl/temp/highcharts/jquery-1.6.1.min.js",
         "/tydw-etl/temp/highcharts/Ext.ux.HighChart.js",
         "/tydw-etl/temp/highcharts/highcharts.src.js",
         "/tydw-etl/temp/highcharts/adapter-extjs.js",
         "/tydw-etl/temp/ext-3.1.1/examples/ux/SliderTip.js",
         '/tydw-etl/jsp/yjpt/basic/ChartsHighGradePanel.js'
        ]  
       },
       //日程文件
       extensibleFile:{
        cssFile:[
         "/tydw-etl/temp/extensible-1.0.2/resources/css/extensible-all.css",
         "/tydw-etl/temp/extensible-1.0.2/resources/css/extensible-all-ext.css",
         "/tydw-etl/temp/extensible-1.0.2/examples/calendar/test-app.css",
         "/tydw-etl/temp/ext-3.1.1/ux/fileuploadfield/css/fileuploadfield.css",
         "/tydw-etl/jquery/bootstrap/css/table.css"
        ],
        jsFile:[
         "/tydw-etl/temp/extensible-1.0.2/lib/extensible-all-debug.js",
         "/tydw-etl/temp/extensible-1.0.2/examples/calendar/data/calendars.js",
         "/tydw-etl/temp/extensible-1.0.2/examples/calendar/data/events.js",
         "/tydw-etl/temp/extensible-1.0.2/examples/calendar/CalendarStore.js",
         //"/tydw-etl/temp/extensible-1.0.2/examples/calendar/MemoryEventStore.js",
         //"/tydw-etl/temp/extensible-1.0.2/src/calendar/data/EventStore.js",
         "/tydw-etl/util/basic/CalendarPanel.js",
         "/tydw-etl/temp/ext-3.1.1/examples/ux/fileuploadfield/FileUploadField.js"
        ]  
       },
       //表头文件
       ColumnHeaderGroupFile:{
        cssFile:[
         "/tydw-etl/temp/ext-3.1.1/ux/css/ColumnHeaderGroup.css"
        ],
        jsFile:[
         "/tydw-etl/temp/ext-3.1.1/ux/ColumnHeaderGroup.js" //这个需要使用高版本(3.3.1)的插件
        ]  
       },
       //grid分类汇总文件
       GroupSummaryFile:{
        cssFile:[
         "/tydw-etl/temp/ext-3.1.1/ux/css/GroupSummary.css"
        ],
        jsFile:[
         "/tydw-etl/temp/ext-3.1.1/ux/GroupSummary.js"
        ]  
       },
       //表样式扩展文件
       tableExtFile:{
        cssFile:[
         "/tydw-etl/jquery/bootstrap/css/table.css"
        ],
        jsFile:[
        ]  
       }
      },
      //动态创建CSS
      createLinkCss :function(url){
       var link = document.createElement('link');
       link.setAttribute('rel','stylesheet');
       link.setAttribute('type','text/css');
       link.setAttribute('href',url);
       return link;
      },
      //动态插入CSS
      insertLinkCss:function(links){
       //var heads = Ext.query('head');
       var heads = document.getElementsByTagName("head");
       var head = heads[0];
       for(var i=0;i<links.length;i++){
        var link = links[i];
        var linkEle = CUSTOM.createLinkCss(link);
        head.appendChild(linkEle);
       }
      },
      //是否已经加载了某个文件
      isInclude:function(name){
          var js= /js$/i.test(name);
          var es=document.getElementsByTagName(js?'script':'link');
          for(var i=0;i<es.length;i++) {
           if(es[i][js?'src':'href'].indexOf(name)!=-1)return true;
          }
          return false;
      },
      //插入所有的js与Css文件
      insertUserScriptAndCss:function(names,callback){
       var args = names.split(",");
       var alljsFiles = [];
       var allcssFiles = [];
       for(var i=0;i<args.length;i++){
        var cssFiles = CUSTOM.allFiles[args[i]].cssFile;
        var jsFiles = CUSTOM.allFiles[args[i]].jsFile;
        for(var j=0;j<cssFiles.length;j++){
         if(!CUSTOM.isInclude(cssFiles[j])){
          allcssFiles.push(cssFiles[j]);
         }
        }
        CUSTOM.insertLinkCss(allcssFiles);
        for(var j=0;j<jsFiles.length;j++){
         if(!CUSTOM.isInclude(jsFiles[j])){
          alljsFiles.push(jsFiles[j]);
         }
        }
       }
       if(alljsFiles.length>0){
        JsLoader().load(alljsFiles,function(){
         callback();
        },this,true);
       }else{
        callback();
       }
      }
     }
    }

     

     

     

    //根据不同的页面加载文件
    CUSTOM.initCssAndScript = function(action,callback,scope){
      var lastScript = null;
      if(action=="jsp/sys/user/myfocus.jsp" || action=="jsp/yjpt/myfocus/myfocus.jsp"){
       CUSTOM.insertUserScriptAndCss("portalFile",callback);
      }else if(action=="jsp/sys/user/survey.jsp" || action=="jsp/yjpt/survey/survey.jsp"){
       CUSTOM.insertUserScriptAndCss("extensibleFile",callback);
      }else if(action=="jsp/sys/user/groupmn.jsp"){
       CUSTOM.insertUserScriptAndCss("highChartsFile",callback);
      }else if(action=="jsp/yjpt/specialtyfiles/specialtyfiles.jsp"){
       //专业档案,需要highChart
       CUSTOM.insertUserScriptAndCss("highChartsFile,tableExtFile,GroupSummaryFile",callback);
      }else{
       callback();
      }
    };

     

     

    //ie不支持Array 的indexOf方法
    if (!Array.prototype.indexOf)
    {
      Array.prototype.indexOf = function(elt /*, from*/)
      {
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
          from += len;

        for (; from < len; from++)
        {
          if (from in this &&
              this[from] === elt)
            return from;
        }
        return -1;
      };
    }

     

    展开全文
  • 主要介绍了动态加载js文件的方法,结合实例形式简单分析了JavaScript动态加载的实现技巧,需要的朋友可以参考下
  • 主要介绍了如何使用javaScript动态加载Js文件和Css文件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,623
精华内容 1,049
关键字:

动态加载js文件