js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法。
网上发现一个动态加载的方法。摘抄下来,方便自己以后使用
[code lang="html"]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Javascript includes - ready state and onload</title></pre>
<script type="text/javascript">
var css;
function include_css(css_file) {
var html_doc = document.getElementsByTagName('head')[0];
css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', css_file);
html_doc.appendChild(css);
// alert state change
css.onreadystatechange = function () {
if (css.readyState == 'complete') {
alert('CSS onreadystatechange fired');
}
}
css.onload = function () {
alert('CSS onload fired');
}
return false;
}
var js;
function include_js(file) {
var html_doc = document.getElementsByTagName('head')[0];
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);
js.onreadystatechange = function () {
if (js.readyState == 'complete') {
alert('JS onreadystate fired');
}
}
js.onload = function () {
alert('JS onload fired');
}
return false;
}
</script>
</head>
<body>
<h1>javascript includes testing - testing readyState and onload</h1>
This is a test file, part of the second follow up to the "<strong>javascript includes</strong>" article.
<br />
To see the article, <a href="http://www.phpied.com/javascript-include">click here</a>.
To see the follow-up article, <a href="http://www.phpied.com/javascript-include-ready">click here</a>.
To see the second follow-up article, <a href="http://www.phpied.com/javascript-include-ready-onload">click here</a>.
<p>
</p>
<ul>
<li style="cursor: pointer" onclick="include_css('1.css')">Click to load 1.css</li>
<li style="cursor: pointer" onclick="include_js('jsalert.js')">Click to load jsready.js</li>
</ul>
</body>
</html>
<pre>
[/code]
js动态加载css文件和js文件的方法的更多相关文章
- 文字添加响应事件,js动态加载CSS, js弹出DIV
文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- js动态加载css和js
之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- JavaScript动态加载CSS和JS文件
var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- .NET Web后台动态加载Css、JS 文件,换肤方案
后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
随机推荐
- LoopBack – 开源的,可扩展的 Node.js 框架
LoopBack 是建立在 Express 基础上的开源 Node.js 框架,专门为 Mobile,Web 和其他设备做了优化.LoopBack 能够连接到多个数据源,使用 Node.js 编写业务 ...
- [python]pythonic的字典常用操作
注意:dct代表字典,key代表键值 1.判断字典中某个键是否存在 实现 dct.has_key(key) #False 更Pythonic方法 key in dct #False 2.获取字典中的值 ...
- sitemesh学习笔记(3)
前两篇博客浅谈了一下sitemesh3.0和2.4的区别和简单用法,今天我做了一个结合sturts2的sitemesh构架,由于strusts2只能用sitemesh2.x的版本,与3.0目前还不能兼 ...
- EF封装类 增加版,增加从缓存中查找数据方法,供参考!
EF封装类 增加版,增加从缓存中查找数据方法,供参考! 这个类是抽象类,我这里增加了需要子类验证的方法ValidateEntity,方便扩展,若想直接使用该类,可以将该类更改成静态类,里面所有的方法都 ...
- XML to Entity
public static T GetEntityByXml<T>(string xml, string rootNode=null) where T : new() { if (stri ...
- 组合数学 - 置换群的幂运算 --- poj CARDS (洗牌机)
CARDS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 1448 Accepted: 773 Description ...
- 二维KMP - 求字符矩阵的最小覆盖矩阵 - poj 2185
Milking Grid Problem's Link:http://poj.org/problem?id=2185 Mean: 给你一个n*m的字符矩阵,让你求这个字符矩阵的最小覆盖矩阵,输出这个最 ...
- MAC OS X 系统怎么样?
朝鲜的 IT 应用状况并不为外界所熟知,过去媒体纷纷报道,朝鲜已故领导人金正日酷爱苹果电子产品,而最近一份调查报告显示,在朝鲜个人电脑操作系统市场,苹果 MAC OS X 系统位居第一名,遥遥领先微软 ...
- 如何弹出一定的大小的web窗体?
如何弹出一定的大小的web窗体? 摘自: http://blog.163.com/hweibin126@126/blog/static/17044246920108413348344/ 一.wind ...
- div与>div区别小结
两者之间的区别:例如div span得到的是div下所有的span元素,而div>span则是取得的div下第一级的span元素. 示例代码如下: <!DOCTYPE html> & ...