动态加载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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 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随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
css图片自适应大小
2007/11/28 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
Mac 上切换Python多版本
2017/06/17 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
介绍一下#error预处理
2015/09/25 面试题
医生自荐信
2013/10/11 职场文书
德语专业求职信
2014/03/12 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
物流管理专业推荐信
2014/09/06 职场文书
教代会开幕词
2015/01/28 职场文书
python 爬取华为应用市场评论
2021/05/29 Python