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");

时间: 2024-11-05 21:57:01

JavaScript_动态加载CSS和JS文件的相关文章

JavaScript动态加载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; lin

.NET Web后台动态加载Css、JS 文件,换肤方案

后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFile = new HtmlGenericControl("link"); _CssFile.ID = "CssFile"; _CssFile.Attributes["rel"] = "stylesheet"; _CssFile.A

js动态加载css和js

js动态加载css和js用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjscssfile("http://libs.baidu.com/jquery/1.9.1/jquery.js","js") * @param fileurl 文件路径, * @param filetype 文件类型,支持传入类型,js.css */ loadjscssfile:function(

JQuery 加载 CSS、JS 文件的方法有哪些?

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

php ci框架中加载css和js文件失败的原因及解决方法

在将html页面整合到ci框架里面的时候,加载css和js失败.原因是ci框架是入口的框架 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 在控制器中需要先载入url相关的类 public function test() { $this->load->helper('url'); $this->load->view('admin/test'); } 在test.php的view视图中.

CI模板加载css和js

1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config->item('base_url'); //通过参数传递到html页面 $this->load->view('form/myform.php', array('base_url'=>$base_url)); 参考资料:http://fc-lamp.blog.163.com/blog/stat

[AngularJS] 使用AngularCSS动态加载CSS

[AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如何使用AngularAMD来动态加载Controller与Service.本篇文章以此为基础,介绍如何使用AngularCSS来动态加载CSS,让项目功能更加模块化,增加开发与维护的工作效率.主要为自己留个纪录,也希望能帮助到有需要的开发人员. AngularCSS 安装 本篇文章以「使用Angul

yii2 如何在页面底部加载css和js

作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那 为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都

Nginx做负载均衡无法加载css,js

配置完nginx,访问tomcat时发现,tomcat显示如下图: 从这个状态可以看出,猜测可能是css和js这些文件没有加载. 不仅如此,访问部署在tomcat项目的页面也是一样的,不同nginx访问tomcat下的项目时这样的: 通过nginx作为代理服务器,访问到的页面是这样的: 这些情况显然都是因为通过nginx作为负载均衡服务器时候,无法正常加载css和js这些文件而出现这样的问题,通过一番搜索和查找,修改了nginx下的nginx.conf配置文件才得以正常显示,修改的配置如下: 增