【www.bbyears.com--js教程】
在javascript中没有像php中可以使用include加载文件，这里我们需要自己定义一些方法，下面总结了关于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){
var scriptTag = document.getElementById("loadScript");
var head = document.getElementsByTagName("head").item(0);
if(scriptTag) head.removeChild(scriptTag);
script = document.createElement("script");
script.src = "../js/mi_"+file+".js";
script.type = "text/javascript";
script.id = "loadScript";
head.appendChild(script);
}
function loadCss(file){
var cssTag = document.getElementById("loadCss");
var head = document.getElementsByTagName("head").item(0);
if(cssTag) head.removeChild(cssTag);
css = document.createElement("link");
css.href = "../css/mi_"+file+".css";
css.rel = "stylesheet";
css.type = "text/css";
css.id = "loadCss";
head.appendChild(css);
}
使用JS动态在页面加载CSS文件
刚刚在写随笔的时候发现cnblogs好像将自己在文章的HTML里定义的CSS(例如： )都过滤掉了，记得以前自己收藏过一个JS函数，可以动态加载CSS文件，翻翻电脑果然找到了，代码贴出来，说不准在工作中也会用到呢。
代码如下 复制代码
<script language="javascript">
function loadjscssfile(filename, filetype) {
if (filetype == "js") {
var fileref = document.createElement("script");
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", filename)
} else if (filetype == "css") {
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("http://news.163.com/special/0001jt/dblue.css", "css");
一个完美的插件可动态加载js,和css
更新：2012.07.13
*修复queued因定义为this.queued导致多个load混乱
*更改参数为数组
使用方法为直接调用Util.load()，可以为每个文件添加回调，也可以添加一个全局回调，示例：
代码如下 复制代码[
Util.load([
["/misc/js/content.js", function() {
// 单个回调
}],
["/misc/js/comment.js"],
["/misc/js/home.js"]
], function() {
// 全局回调
});
] [
var Util = {
/**
* 全局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>中一样就行了
/ 第一种 单个文件，带回调
代码如下 复制代码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!");
});
还有些问题，有空再完善下。