javascript include/import 动态加载js/css文件方法总结
第一种：一般用在外部CSS文件中加载必须的文件
程序代码
| 代码如下 | |
| @import url(style.css); |
|
/*只能用在CSS文件中或者style标签中*/
第二种：简单的在页面中加载一个外部CSS文件
程序代码
| 代码如下 | |
| document.createStyleSheet(cssFile); | |
第三种：用createElement方法创建CSS的Link标签
程序代码
| 代码如下 | |
| var head = document.getElementsByTagName('HEAD').item(0); var style = document.createElement('link'); style.href = 'style.css'; style.rel = 'stylesheet'; style.type = 'text/css'; head.appendChild(style); |
|
这里贴上我以前在项目中使用的几个函数，希望对大家有用！
程序代码
| 代码如下 | |
|
function loadJs(file){ function loadCss(file){ |
|
使用JS动态在页面加载CSS文件
刚刚在写随笔的时候发现cnblogs好像将自己在文章的HTML里定义的CSS(例如：<link rel="stylesheet" type="text/css" href="xxx.css" /> )都过滤掉了，记得以前自己收藏过一个JS函数，可以动态加载CSS文件，翻翻电脑果然找到了，代码贴出来，说不准在工作中也会用到呢。
| 代码如下 | |
|
function loadjscssfile(filename, filetype) { |
|
一个完美的插件可动态加载js,和css
更新：2012.07.13
*修复queued因定义为this.queued导致多个load混乱
*更改参数为数组
使用方法为直接调用Util.load()，可以为每个文件添加回调，也可以添加一个全局回调，示例：
| 代码如下 | |
|
[
["/misc/js/content.js", function() {
// 单个回调
}],
["/misc/js/comment.js"],
["/misc/js/home.js"]
], function() {
// 全局回调
});
/**
* 全局js列表
*/
scripts: {},
head: document.head || document.getElementsByTagName("head")[0] || document.documentElement,
/**
* 异步加载js文件
*/
load: function(queue, callback) {
var self = this, queued = queue.length;
for (var i = 0, l = queue.length; i < l; i++) {
var elem;
elem = document.createElement("script");
elem.setAttribute("type", "text/javascript");
elem.setAttribute("async", "async");
elem.setAttribute("src", queue[i][0]);
// 文件还没有处理过
if (typeof this.scripts[elem.src] === "undefined") {
// 使onload取得正确elem和index
(function(elem, index) {
elem.onload = elem.onreadystatechange = function() {
if (! elem.readyState || /loaded|complete/.test(elem.readyState)) {
queued--;
// 解决IE内存泄露
elem.onload = elem.onreadystatechange = null;
// 释放引用
elem = null;
// 调用callback
queue[index][1] && queue[index][1]();
// 队列全部加载，调用最终callback
if (queued === 0) {
callback && callback();
}
}
};
})(elem, i);
}
// 已处理，调用callback
else {
queued--;
queue[i][1] && queue[i][1]();
}
this.head.appendChild(elem);
// 队列全部加载，调用最终callback
if (queued === 0) {
callback && callback();
}
}
}
};
|
|
使用举例：
// 路径写法和<script><link>中一样就行了
/ 第一种 单个文件，带回调
| 代码如下 | |
|
include("js/jquery.js", function () {
alert("i'm callback!");
}); |
|
// 第二种 多个文件，带回调
// 多个文件以数组的形式书写，每个文件可以单独带回调，
// 最后一个回调将在最后一个文件加载完后调用
| 代码如下 | |
|
include([
["js/jquery.js", function () {
alert("i'm callback of jquery.js");
}],
["js/misc.js", function () {
alert("i'm callback of misc.js");
}],
["css/style.css", function () {
alert("i'm callback of style.css");
}],
["css/index.css"]
], function () {
alert("i'm the last callback!");
}); |
|
还有些问题，有空再完善下。
