今天研究了下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文件的方法的更多相关文章

  1. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  3. js动态加载css和js

    之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...

  4. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  5. js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  6. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

  7. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

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

    后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...

  9. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

随机推荐

  1. JavaScript TDD with Mocha

    开发现状 当新的版本快要发布的时候,大家都忙于加班,加紧修复BUG1.BUG2.我想这就是很多公司开发的现状. 为了不至于让上线的版本挂掉挂掉,少不了就是 人肉测试. 在一个项目中,我们会做许许多多各 ...

  2. 【分布式】RPC初探

    事先声明:本文代码参考自Dubbo作者的博客. RPC(Remote Procedure Call)远程过程调用,是分布式系统当中必不可少的一个玩意.比如说在单机系统当中,我想调用某个方法,直接调就可 ...

  3. 受限玻尔兹曼机（RBM）学习笔记（一）预备知识

    去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算法原 ...

  4. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  5. sublime 插件zen coding

    sublime的插件Zen Coding是一个编写html的神器,现在已经更名为Emmet了. 在sublime中的package需要搜索的是Emmet 相关网站: 官网 Zen Coding: 一种 ...

  6. lnmp_auto:自动化安装lnmp环境脚本

    朋友找我在一台机器上帮忙安装下discuz.想着搭建过好几次的lnmp了,但是还没有使用过"一键安装"的自动化脚本,去网上有搜索出来,但是运行的时候发现用root运行别人的脚本还是 ...

  7. c3p0配置

    <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN&q ...

  8. C#设计模式——装饰者模式(Decorator Pattern)

    一.例子在软件开发中,我们往往会想要给某一类对象增加不同的功能.比如要给汽车增加ESP.天窗或者定速巡航.如果利用继承来实现,就需要定义无数的类,Car,ESPCar,CCSCar,SunRoofCa ...

  9. C#接口知识大全收藏

    第一节 接口慨述 接口(interface)用来定义一种程序的协定.实现接口的类或者结构要与接口的定义严格一致.有了这个协定,就可以抛开编程语言的限制(理论上).接口可以从多个基接口继承,而类或结构可 ...

  10. 可访问性级别的C# 修饰符

    使用访问修饰符 public.protected.internal 或 private 可以为成员指定以下声明的访问级别之一. http://keleyi.com/a/bjad/3ccfqh95.ht ...