JavaScript_动态加载CSS和JS文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript_动态加载CSS和JS文件相关的知识,希望对你有一定的参考价值。

项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var dynamicLoading = {
  css: function(path){
 if(!path || path.length === 0){
  throw new Error(‘argument "path" is required !‘);
 }
 var head = document.getElementsByTagName(‘head‘)[0];
    var link = document.createElement(‘link‘);
    link.href = path;
    link.rel = ‘stylesheet‘;
    link.type = ‘text/css‘;
    head.appendChild(link);
  },
  js: function(path){
 if(!path || path.length === 0){
  throw new Error(‘argument "path" is required !‘);
 }
 var head = document.getElementsByTagName(‘head‘)[0];
    var script = document.createElement(‘script‘);
    script.src = path;
    script.type = ‘text/javascript;
    head.appendChild(script);
  }
}

对象包含两个完全独立的方法,分别用来加载CSS 文件和JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,是 web 开发人员工作常备代码。
下面是调用代码,异常简单:

1
2
3
4
5
//动态加载 CSS 文件
dynamicLoading.css("test.css");
 
//动态加载 JS 文件
dynamicLoading.js("test.js");

以上是关于JavaScript_动态加载CSS和JS文件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript动态加载CSS和JS文件

用JavaScript动态加载CSS和JS文件

如何动态加载外部CSS与JS文件

JavaScript 文件中的代码如何获取文件的 URL?

如何动态加载js文件

JavaScript 之 动态加载JS代码或JS文件