动态加载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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
jQuery实现计算器功能
Oct 19 jQuery
详解JavaScript执行模型
Nov 16 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
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
js数组操作学习总结
2013/11/04 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
python中list循环语句用法实例
2014/11/10 Python
python实现网站的模拟登录
2016/01/04 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
对python生成业务报表的实例详解
2019/02/03 Python
python关闭占用端口方式
2019/12/17 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
.net面试题
2016/09/17 面试题
房地产广告策划方案
2014/05/15 职场文书
捐款感谢信
2015/01/20 职场文书
小人国观后感
2015/06/11 职场文书
寒假致家长的一封信
2015/10/10 职场文书