用javascript动态加载javascript脚本/css样式表

用javascript动态加载javascript脚本/css样式表

//   命名空间对象
Namespace = new Object();
Namespace.register = function(fullname) {
try {
var nsArray = fullname.split(".");
var strNS = "";
var strEval = "";
for (var i = 0; i < nsArray.length; i++) {
if (strNS.length > 0)
strNS += ".";
strNS += nsArray[i];
strEval += " if(typeof(" + strNS + ") =='undefined') " + strNS + " = new Object(); ";
}
if (strEval != "") eval(strEval);
} catch (e) { alert(e.message); }
}

//注册命名空间
Namespace.register('Common');
/**动态加载资源文件(js 文件和 css 文件)**/
Common.srcLoader = {
/**入口函数**/
/* fileList: 	 需要动态加载的资源列表 */
/* callback: 	 所有资源都加载完后调用的回调函数,通常是页面上需要onload就执行的函数 */
/* scope: 	 	 作用范围 */
、、/* preserveOrder: 	 是否保持脚本顺序 */

Load: function(fileList, callback, scope, preserveOrder) {
var scope = scope || this,
//var scope=this,//默认作用范围是当前页面
head = document.getElementsByTagName("head")[0],
fragment = document.createDocumentFragment(),
numFiles = fileList.length,
loadedFiles = 0;

// Loads a particular file from the fileList by index. This is used when preserving order
var loadFileIndex = function(index) {
head.appendChild(
Common.srcLoader.buildScriptTag(fileList[index], onFileLoaded)
);
};

/**
* 调用回调函数,当所有文件都加载完后调用
*/
var onFileLoaded = function() {
loadedFiles++;
//如果当前文件是最后一个要加载的文件，则调用回调函数，否则加载下一个文件
if (numFiles == loadedFiles && typeof callback == 'function') {
callback.call(scope);
} else {
if (preserveOrder === true) {
loadFileIndex(loadedFiles);
}
}
};

if (preserveOrder === true) {
loadFileIndex.call(this, 0);
} else {
for (var i = 0, len = fileList.length; i < len; i++) {
fragment.appendChild(this.buildScriptTag(fileList[i], onFileLoaded));
}
head.appendChild(fragment);
}
},

//构造javascript和link 标签
buildScriptTag: function(filename, callback) {
var exten = filename.substr(filename.lastIndexOf('.') + 1);
if (exten == 'js') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = filename;
//IE has a different way of handling <script> loads, so we need to check for it here
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = callback;
}
return script;
}
if (exten == 'css') {
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = filename;
callback();
return style;
}
}
}

使用：在页面上使用

引用以上脚本是必须的让后在页面上加入 类似的代码：

<script type="text/javascript">//根据需要加载js文件,并设置回调函数Common.srcLoader.Load(['../js/jquery.js','../js/ext-base.js','../js/ext-all.js','../js/ext_ux.js','../js/FBaseFunc.js','../js/FBaseJQueryFunc.js','../js/FBaseExtFunc.js','js/SchoolGradeTestCountDrillable.js','../js/lovcombo.js','../RptService/amchart/swfobject.js'],loadPage,null,true);//回调函数function loadPage() {//设置全局相对路径gRPath = "../"target = "amcharts_1302230008081";reportID = "1";userID = "1";Ext.onReady(function() {//设置Cookie操作对象Ext.state.Manager.setProvider(new Ext.state.CookieProvider());//标题区域var oleTitleInfo = new Ext.BoxComponent({ el: 'div_func_title', height: 50, region: "north" });DoSomething();});}</script>

动态加载脚本最大的好处在于减少页面初始化的响应时间，避免不需要加载外部 javascript