无为清净楼资源网 Design By www.qnjia.com

本文实例讲述了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程序设计有所帮助。

标签:
javascript,动态导入,js,css,静态资源文件

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com