45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:javascript如何实现动态导入js和css等静态资源文件?

javascript如何实现动态导入js和css等静态资源文件?

2015-08-12 06:11:32 来源:www.45fan.com 【

javascript如何实现动态导入js和css等静态资源文件?

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


本文地址:http://www.45fan.com/bcdm/17492.html
Tags: 实现 动态 JavaScript
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部