欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

动态加载js、css的简单实现代码

时间:2021-02-09 14:35:10|栏目:JavaScript代码|点击:

一、原生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实现计算加载页面所用的时间

栏    目:JavaScript代码

下一篇:JS module的导出和导入的实现代码

本文标题:动态加载js、css的简单实现代码

本文地址:http://www.codeinn.net/misctech/60042.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有