黑马程序员技术交流社区

标题: 【上海校区】用JavaScript动态加载CSS和JS文件 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-9-11 09:57
标题: 【上海校区】用JavaScript动态加载CSS和JS文件

动态加载 CSS 文件，经，顺便融合了动态加载 JS 的功能写成了一个对象，先上代码：

• 
  
  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 开发人员工作常备代码，请放心使用。
下面是调用代码，异常简单：

• 
  
  //动态加载 CSS 文件
  
  
• 
  
  dynamicLoading.css("test.css");
  
  
• 
  
  
  
  
• 
  
  //动态加载 JS 文件
  
  
• 
  
  dynamicLoading.js("test.js")
  
  
  

---

作者: 不二晨    时间: 2018-9-13 16:36

很不错，受教了

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2