动态加载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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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技术开发技巧分享
2010/03/23 PHP
PHP中PDO的错误处理
2011/09/04 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
页面版文本框智能提示JS代码
2009/11/20 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
Python实现的简单算术游戏实例
2015/05/26 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python实现堆排序的实例讲解
2020/02/21 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python判断是空的实例分享
2020/07/06 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
期末自我鉴定
2014/01/23 职场文书
中国好声音广告词
2014/03/18 职场文书
环保专项行动方案
2014/05/12 职场文书
音乐学专业求职信
2014/07/22 职场文书
毕业生实习证明
2014/09/19 职场文书
车辆委托书范本
2014/10/05 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
使用Python拟合函数曲线
2022/04/14 Python