动态加载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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue postcss-px2rem 自适应布局
May 15 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python 装饰器深入理解
2017/03/16 Python
python 获取图片分辨率的方法
2019/01/08 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
医院节能减排方案
2014/06/13 职场文书
推广普通话标语
2014/06/27 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
服务承诺书
2015/01/19 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python