动态加载JS和CSS文件
对于经常设计web页面的技术人员来说，javascript和css是必备的行囊，可能很多人都会运用这门技术。但是，试想一下，对于一个大型的web应用程序，可能包含大量的javascript和css文件，我们都知道加载这些文件需要网络带宽的，而且每个页面都去手动引入很多<script>或<link>等文件，对于开发人员来说可能是件费力不讨好的事情。而且，在项目维护后期，改动一个文件可能会影响到几个页面效果，自己加的文件也许别人在master或其他地方已经加载过，造成多余的文件浪费。因此，我们需要一种机制(或接口)来控制文件的引入，以便我们更方便的维护，以后这些维护工作专门找js人员即可完成，不必再去一个个检查页面。下面，我将这个动态引入的文件展示出来：
不妨给它起一个响亮的名字：JSLoader.js
/*
*JS文件动态加载工具(2011-12-12)
*/
var JSLoader = {
scripts: {
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
},
browser: {
ie: /msie/.test(window.navigator.userAgent.toLowerCase()),
moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),
opera: /opera/.test(window.navigator.userAgent.toLowerCase()),
safari: /safari/.test(window.navigator.userAgent.toLowerCase())
},
call: (function () {
function hasFile(tag, url) {
var contains = false;
var files = document.getElementsByTagName(tag);
var type = tag == "script" ? "src" : "href";
for (var i = 0, len = files.length; i < len; i++) {
if (files[i].getAttribute(type) == url) {
contains = true;
break;
}
}
return contains;
}
function loadFile(element, callback, parent) {
var p = parent && parent != undefined ? parent : "head";
document.getElementsByTagName(p)[0].appendChild(element);
if (callback) {
//ie
if (JSLoader.browser.ie) {
element.onreadystatechange = function () {
if (this.readyState == 'loaded' || this.readyState == 'complete') {
callback();
}
};
} else if (JSLoader.browser.moz) {
element.onload = function () {
callback();
};
} else {
callback();
}
}
}
function loadCssFile(files, callback) {
var urls = files && typeof (files) == "string" ? [files] : files;
for (var i = 0, len = urls.length; i < len; i++) {
var cssFile = document.createElement("link");
cssFile.setAttribute('type', 'text/css');
cssFile.setAttribute('rel', 'stylesheet');
cssFile.setAttribute('href', urls[i]);
if (!hasFile("link", urls[i])) {
loadFile(cssFile, callback);
}
}
}
function loadScript(files, callback, parent) {
var urls = files && typeof (files) == "string" ? [files] : files;
for (var i = 0, len = urls.length; i < len; i++) {
var script = document.createElement("script");
script.setAttribute('charset', 'gb2312');
script.setAttribute('type', 'text/javascript');
补充：web前端 , JavaScript ,
