动态加载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现实多行信息
Aug 26 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
理解javascript中的闭包
Jan 11 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python中正则表达式详解
2017/05/17 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
大学生求职简历的自我评价
2013/10/14 职场文书
企业安全生产责任书
2014/04/14 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
个人培训总结
2015/03/05 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
文明上网主题班会
2015/08/14 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Python序列化与反序列化相关知识总结
2021/06/08 Python
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS