动态加载js、css的简单实现代码


Posted in Javascript onMay 26, 2016

一、原生js:

/**
     * 加载js和css文件
     * @param     jsonData.path        前缀路径
     * @param     jsonData.url        需要加载的js路径或css路径
     * @param     jsonData.type        需要加载的类型 js或css
    */
     function loadWriteFiles(jsonData)
     {
       jsonData.path = jsonData.path != undefined ? jsonData.path : "";
       if(jsonData.type == "js")
       {
        document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");
       }
       else if(jsonData.type == "css")
       {
        document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");
       }
     }
     
     /**
     * 加载js或css到head中
     * @param     jsonData.path        前缀路径
     * @param     jsonData.url        需要加载的js路径或css路径
     * @param     jsonData.type        需要加载的类型 js或css
     */
     function loadFilesToHead(jsonData)
     {
       jsonData.path = jsonData.path != undefined ? jsonData.path : "";
       if(jsonData.type == "js")
       {
         var _js = document.createElement("script");
         _js.setAttribute("type", "text/javascript");
         _js.setAttribute("src", jsonData.path + jsonData.url);
         _js.onload = _js.onreadystatechange=function(){ 
           if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
             if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
                jsonData["callback"].call(this);
             }
           } 
           _js.onload=_js.onreadystatechange=null; 
         } 
         document.getElementsByTagName("head")[0].appendChild(_js);//追加到head标签内
       }
       else if(jsonData.type == "css")
       {
         var _css = document.createElement("link");
         _js.setAttribute("type", "text/css");
         _css.setAttribute("rel", "stylesheet");
         _css.setAttribute("href", jsonData.path + jsonData.url);
         document.getElementsByTagName("head")[0].appendChild(_css);//追加到head标签内
       }
     }

二、jquery版本:

采用deferred对象返回结果

var uiLoad = uiLoad || {};

(function($, $document, uiLoad) {
  "use strict";

  var loaded = [],
  promise = false,
  deferred = $.Deferred();

  uiLoad.load = function (srcs) {
    srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);
    if(!promise){
      promise = deferred.promise();
    }

   $.each(srcs, function(index, src) {
    promise = promise.then( function(){
      return src.indexOf('.css') >=0 ? loadCSS(src) : loadScript(src);
    } );
   });
   deferred.resolve();
   return promise;
  };

  var loadScript = function (src) {
    if(loaded[src]) return loaded[src].promise();

    var deferred = $.Deferred();
    var script = $document.createElement('script');
    script.src = src;
    script.onload = function (e) {
      deferred.resolve(e);
    };
    script.onerror = function (e) {
      deferred.reject(e);
    };
    $document.body.appendChild(script);
    loaded[src] = deferred;

    return deferred.promise();
  };

  var loadCSS = function (href) {
    if(loaded[href]) return loaded[href].promise();

    var deferred = $.Deferred();
    var style = $document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.href = href;
    style.onload = function (e) {
      deferred.resolve(e);
    };
    style.onerror = function (e) {
      deferred.reject(e);
    };
    $document.head.appendChild(style);
    loaded[href] = deferred;

    return deferred.promise();
  }

})(jQuery, document, uiLoad);

以上这篇动态加载js、css的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
JS hashMap实例详解
May 26 #Javascript
jQuery验证插件validate使用方法详解
Sep 13 #Javascript
动态加载js、css的实例代码
May 26 #Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 #Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 #Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 #Javascript
jquery分隔Url的param方法(推荐)
May 25 #Javascript
You might like
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
javascript每日必学之继承
2016/02/23 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python for i in range ()用法详解
2020/09/18 Python
用python绘制樱花树
2020/10/09 Python
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
法律专业自荐信
2014/06/03 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
行政复议决定书
2015/06/24 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技