如何实现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");
以上就是告诉大家如何实现JavaScript动态加载CSS和JS文件,希望对大家的学习有所帮助。
相关推荐
-
jQuery动态加载css文件实现方法
有时我们可能会需要使用 jQuery 来加载一个外部的 css 文件,如在切换页面布局时.思路是创建一个 link 元素,并将它添加到 标记中即可,下边首先看看怎么使用 jQuery 来实现. 下边是我喜欢的写法: $("<link>") .attr({ rel: "stylesheet", type: "text/css", href: "site.css" }) .appendTo("head&quo
-
动态加载css方法实现和深入解析
一.方法引用来源和应用 此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析). 因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需的css文件进行动态加载操作. 二.优化后的完整代码 /* * @function 动态加载css文件 * @param {string} options.url -- css资源路径 * @param {function} options.callback -- 加载后回调函数 * @param {s
-
javascript实现动态加载CSS
复制代码 代码如下: <script type="text/javascript"> function addStyle(stylePath) { var container = document.getElementsByTagName("head")[0]; var addStyle = document.createElement("link"
-
IE8中使用javascript动态加载CSS的解决方法
众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt
-
如何实现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 =
-
Yii2框架加载css和js文件的方法分析
本文实例讲述了Yii2框架加载css和js文件的方法.分享给大家供大家参考,具体如下: 1.第一步是要把我们的css.js文件放到web目录下 2.第二步修改assets/AppAsset.php文件 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * @license http://www.yiiframework.com/license/ */ na
-
php ci框架中加载css和js文件失败的解决方法
在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架,对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件 相对路径<script src= "resource/a
-
php ci框架中加载css和js文件失败的原因及解决方法
在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架, 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件 相对路径<script src= "resource
-
javascript 动态加载 css 方法总结
1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'
-
用ajax动态加载需要的js文件
习惯了用java,在java中,需要某个类直接import就可以了,所以做javascript的时候也想实现这个效果. 前段时间,用了下dojo,里面的dojo.require的功能很不错,一看代码,晕了,一大堆东西,唉-还是自己写个简单点的,dojo.require可以引入包,我就只做一个导入js文件的. 开始用的document.write,执行顺序不对了,这是在后面进行导入,而我们总是在前面执行中就需要导入的js,这样,执行中就会报"某某未定义",就是顺序问题了. 接着,我就想用
-
使用javaScript动态加载Js文件和Css文件
JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen
-
JavaScript动态加载样式表的方法
本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';
-
javascript动态加载三
之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解
随机推荐
- 关于JavaScript限制字数的输入框的那些事
- Js中的onblur和onfocus事件应用介绍
- iOS对象指针和基础数据类型的强转详解
- Python中实现的RC4算法
- python3+PyQt5实现使用剪贴板做复制与粘帖示例
- Python 正则表达式实现计算器功能
- js实现圆盘记速表
- PHPMailer的主要功能特点和简单使用说明
- js和jquery中循环的退出和继续学习记录
- Windows Powershell对象转换成文本
- dess中一个简单的多路委托的实现
- JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
- Kotlin基础教程之操作符与操作符重载
- zlib库压缩和解压字符串STL string的实例详解
- 可以保证单词完整性的PHP英文字符串截取代码分享
- php 动态多文件上传
- Log4j 配置日志打印时区的实现方法
- 实例解析php的数据类型
- php设计模式之适配器模式原理、用法及注意事项详解
- Python实现将数据写入netCDF4中的方法示例