欢迎来到代码驿站!

JavaScript代码

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

javascript实现动态导入js与css等静态资源文件的方法

时间:2021-03-29 09:43:06|栏目:JavaScript代码|点击:

本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下:

/**
 * 动态导入静态资源文件js/css
 */
var $import = function(){
  return function(rId, res, callback){
    if(res && 'string' == typeof res){
      if(rId){
        if($($('#' + rId), $('head')).length>0){
          return;
        }
      }
      //加载资源文件
      var sType = res.substring(res.lastIndexOf('.') + 1);
      // 支持js/css
      if(sType && ('js' == sType || 'css' == sType)){
        var isScript = (sType == 'js');
        var tag = isScript ? 'script' : 'link';
        var head = document.getElementsByTagName('head')[0];
        // 创建节点
        var linkScript = document.createElement(tag);
        linkScript.type = isScript ? 'text/javascript' : 'text/css';
        linkScript.charset = 'UTF-8';
        if(!isScript){
          linkScript.rel = 'stylesheet';
        }
        isScript ? linkScript.src = res : linkScript.href = res;
        if(callback && 'function' == typeof callback){
          if (linkScript.addEventListener){
            linkScript.addEventListener('load', function(){
              callback.call();
            }, false);
          } else if (linkScript.attachEvent) {
            linkScript.attachEvent('onreadystatechange', function(){
              var target = window.event.srcElement;
              if (target.readyState == 'complete') {
                callback.call();
              }
            });
          }
        }
        head.appendChild(linkScript);
      }
    }
  };
}();

希望本文所述对大家的javascript程序设计有所帮助。

上一篇:详解webpack异步加载业务模块

栏    目:JavaScript代码

下一篇:关于js datetime的那点事

本文标题:javascript实现动态导入js与css等静态资源文件的方法

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

推荐教程

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

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

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

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

Copyright © 2020 代码驿站 版权所有