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

 更新时间:2015年07月25日 18:06:19   作者:anttribe  
这篇文章主要介绍了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程序设计有所帮助。

相关文章

  • JS中跳转传参的几种常用方法总结

    JS中跳转传参的几种常用方法总结

    在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,下面这篇文章主要给大家总结介绍了关于JS中跳转传参的几种常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • 下拉框select的绑定示例

    下拉框select的绑定示例

    根据文本绑定text、根据值绑定value,下面有个不错的示例,大家可以看看
    2014-09-09
  • javascript仿XP关机效果的弹出窗口功能

    javascript仿XP关机效果的弹出窗口功能

    javascript仿XP关机效果的弹出窗口功能...
    2007-10-10
  • JavaScript中字符串的常用操作方法及特殊字符

    JavaScript中字符串的常用操作方法及特殊字符

    这篇文章主要介绍了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以参考下
    2018-03-03
  • JavaScript如何获取父级元素和子级元素代码示例

    JavaScript如何获取父级元素和子级元素代码示例

    最近工作中总遇到取各种父啊子啊,每次都得查,所以下面这篇文章主要给大家介绍了关于JavaScript如何获取父级元素和子级元素的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • JavaScript中的一些实用小技巧总结

    JavaScript中的一些实用小技巧总结

    这篇文章主要给大家总结介绍了关于JavaScript中的一些实用小技巧,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • JavaScript解决单线程缺陷webWorker问题

    JavaScript解决单线程缺陷webWorker问题

    Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法,本文给大家介绍JavaScript解决单线程缺陷——webWorker,需要的朋友可以参考下
    2023-06-06
  • layui table 表格模板按钮的实例代码

    layui table 表格模板按钮的实例代码

    今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 原生js模拟淘宝购物车项目实战

    原生js模拟淘宝购物车项目实战

    这篇文章主要向大家推荐了一个原生js模拟淘宝购物车项目实战,包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript和TypeScript中的void的具体使用

    JavaScript和TypeScript中的void的具体使用

    这篇文章主要介绍了JavaScript和TypeScript中的void的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论