夏日博客

A-A+

javascript include/import 动态加载js/css文件方法总结

2016年01月27日 前端设计 暂无评论 阅读 7 views 次

在javascript中没有像php中可以使用include加载文件，这里我们需要自己定义一些方法，下面总结了关于javascript include/import 动态加载js/css文件方法有需要的同学可参考本文章。

第一种:一般用在外部CSS文件中加载必须的文件,程序代码如下:

@import url(style.css);

只能用在CSS文件中或者style标签中.

第二种:简单的在页面中加载一个外部CSS文件,程序代码如下:

document.createStyleSheet(cssFile);

第三种:用createElement方法创建CSS的Link标签,程序代码如下:

  1. var head = document.getElementsByTagName('HEAD').item(0);  
  2. var style = document.createElement('link');  
  3. style.href = 'style.css';  
  4. style.rel = 'stylesheet';  
  5. style.type = 'text/css';  
  6. head.appendChild(style);  

这里贴上我以前在项目中使用的几个函数，希望对大家有用,程序代码如下:

  1. function loadJs(file){  
  2.     var scriptTag = document.getElementById('loadScript');  
  3.     var head = document.getElementsByTagName('head').item(0);  
  4.     if(scriptTag) head.removeChild(scriptTag);  
  5.     script = document.createElement('script');  
  6.     script.src = "../js/mi_"+file+".js";  
  7.     script.type = 'text/javascript';  
  8.     script.id = 'loadScript';  
  9.     head.appendChild(script);  
  10. }  
  11. function loadCss(file){  
  12.     var cssTag = document.getElementById('loadCss');  
  13.     var head = document.getElementsByTagName('head').item(0);  
  14.     if(cssTag) head.removeChild(cssTag);  
  15.     css = document.createElement('link');  
  16.     css.href = "../css/mi_"+file+".css";  
  17.     css.rel = 'stylesheet';  
  18.     css.type = 'text/css';  
  19.     css.id = 'loadCss';  
  20.     head.appendChild(css);  
  21. }  

使用JS动态在页面加载CSS文件

刚刚在写随笔的时候发现cnblogs好像将自己在文章的HTML里定义的CSS(例如:

  1. <link rel="stylesheet" type="text/css" href="xxx.css" />  

都过滤掉了,记得以前自己收藏过一个JS函数,可以动态加载CSS文件,翻翻电脑果然找到了,代码贴出来,说不准在工作中也会用到呢,代码如下:

  1. <script language="javascript">  
  2.     function loadjscssfile(filename, filetype) {  
  3.         if (filetype == "js") {  
  4.             var fileref = document.createElement('script');  
  5.             fileref.setAttribute("type", "text/javascript");  
  6.             fileref.setAttribute("src", filename)  
  7.         } else if (filetype == "css") {  
  8.             var fileref = document.createElement("link");  
  9.             fileref.setAttribute("rel", "stylesheet");  
  10.             fileref.setAttribute("type", "text/css");  
  11.             fileref.setAttribute("href", filename)  
  12.         }  
  13.         if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref)  
  14.     }  
  15.     loadjscssfile("http://news.163.com/special/0001jt/dblue.css", "css");  
  16. </script>  

一个完美的插件可动态加载js,和css

修复queued因定义为this.queued导致多个load混乱,更改参数为数组,使用方法为直接调用Util.load()，可以为每个文件添加回调，也可以添加一个全局回调,示例代码如下:

  1. [  
  2.     Util.load([  
  3.     ["/misc/js/content.js", function() {  
  4.    
  5.         // 单个回调  
  6.    
  7.     }],  
  8.    
  9.     ["/misc/js/comment.js"],  
  10.    
  11.     ["/misc/js/home.js"]  
  12.    
  13. ], function() {  
  14.    
  15.     // 全局回调  
  16.    
  17. });  
  18.   
  19. ] [  
  20.   
  21.     var Util = {  
  22.   
  23.    
  24.     /** 
  25.   
  26.      * 全局js列表 
  27.   
  28.      */  
  29.    
  30.     scripts: {},  
  31.    
  32.     head: document.head || document.getElementsByTagName("head")[0] || document.documentElement,  
  33.    
  34.    
  35.    
  36.     /** 
  37.   
  38.      * 异步加载js文件 
  39.   
  40.      */  
  41.    
  42.     load: function(queue, callback) {  
  43.    
  44.         var self = this, queued = queue.length;  
  45.    
  46.    
  47.    
  48.         for (var i = 0, l = queue.length; i < l; i++) {  
  49.    
  50.             var elem;  
  51.    
  52.             elem = document.createElement("script");  
  53.    
  54.             elem.setAttribute("type", "text/javascript");  
  55.    
  56.             elem.setAttribute("async", "async");  
  57.    
  58.             elem.setAttribute("src", queue[i][0]);  
  59.    
  60.             // 文件还没有处理过  
  61.    
  62.             if (typeof this.scripts[elem.src] === "undefined") {  
  63.    
  64.                 // 使onload取得正确elem和index  
  65.    
  66.                 (function(elem, index) {  
  67.    
  68.                     elem.onload = elem.onreadystatechange = function() {  
  69.    
  70.                         if (! elem.readyState || /loaded|complete/.test(elem.readyState)) {  
  71.    
  72.                             queued--;  
  73.    
  74.                             // 解决IE内存泄露  
  75.    
  76.                             elem.onload = elem.onreadystatechange = null;  
  77.    
  78.                             // 释放引用  
  79.    
  80.                             elem = null;  
  81.    
  82.                             // 调用callback  
  83.    
  84.                             queue[index][1] && queue[index][1]();  
  85.    
  86.                             // 队列全部加载，调用最终callback  
  87.    
  88.                             if (queued === 0) {  
  89.    
  90.                                 callback && callback();  
  91.    
  92.                             }  
  93.    
  94.                         }  
  95.    
  96.                     };  
  97.    
  98.                 })(elem, i);  
  99.    
  100.             }  
  101.    
  102.             // 已处理，调用callback  
  103.    
  104.             else {  
  105.    
  106.                 queued--;  
  107.    
  108.                 queue[i][1] && queue[i][1]();  
  109.    
  110.             }  
  111.    
  112.             this.head.appendChild(elem);  
  113.    
  114.    
  115.    
  116.             // 队列全部加载，调用最终callback  
  117.    
  118.             if (queued === 0) {  
  119.    
  120.                 callback && callback();  
  121.    
  122.             }  
  123.    
  124.         }  
  125.    
  126.     }  
  127.    
  128. };  
  129. ]  

使用举例,路径写法和script,link中一样就行了,第一种单个文件,带回调,代码如下:

  1. include("js/jquery.js", function () {  
  2.    
  3.     alert("i'm callback!");  
  4.    
  5. });  

第二种 多个文件.带回调,多个文件以数组的形式书写,每个文件可以单独带回调,最后一个回调将在最后一个文件加载完后调用,代码如下:

  1. include([  
  2.    
  3.     ["js/jquery.js", function () {  
  4.    
  5.         alert("i'm callback of jquery.js");  
  6.    
  7.     }],  
  8.    
  9.     ["js/misc.js", function () {  
  10.    
  11.         alert("i'm callback of misc.js");  
  12.    
  13.     }],  
  14.    
  15.     ["css/style.css", function () {  
  16.    
  17.         alert("i'm callback of style.css");  
  18.    
  19.     }],  
  20.    
  21.     ["css/index.css"]  
  22.    
  23. ], function () {  
  24.    
  25.     alert("i'm the last callback!");  
  26.    
  27. });  

还有些问题，有空再完善下。

标签：

给我留言