在CMS的plugin計(jì)劃中, 需要控制的一項(xiàng)就是頁面的JS PLUGIN的動態(tài)加載.
一次加載幾十個(gè)plugin的JS是不現(xiàn)實(shí)的.只能在需要用到的時(shí)候再加載進(jìn)來.
在一個(gè)頁面中, 如果我們要加載另外的JS文件進(jìn)來,有一個(gè)方法是
document.write("<script src=''><\/script>");
這樣會產(chǎn)生一個(gè)異步的JS加載, 可以產(chǎn)生一些有趣的應(yīng)用, 如AJAX效果,跨域調(diào)用.
但上面產(chǎn)生的問題,是控制性, 無法控制JS的加載狀態(tài)及加載順序,而且只能在頁面初始化的時(shí)候調(diào)用.
為了解決以上問題,需要設(shè)計(jì)一個(gè)JS的加載控制器及動態(tài)加載JS的程序.
下面的是一段JS的加載代碼:
CMS.util.LoadScript=function( url ,control)
{
var oHead = top.document.getElementsByTagName('HEAD').item(0);
var oScript= top.document.createElement("script");
oScript.type = "text/javascript";
oScript.src=url;
if(control){
function loaded(c){
if (Prototype.Browser.IE && this.readyState.toLowerCase() != "loaded" && this.readyState.toLowerCase() != "complete") {
return;
}
c.next();
}
Event.observe(oScript,"readystatechange",loaded.bind(oScript,control));
Event.observe(oScript,"load",loaded.bind(oScript,control));
}
oHead.appendChild( oScript);
}
需要用到prototype.js庫.
在這個(gè)方法里面是用的DOM的JS加載方法,利用了script的
readystatechange參數(shù),這個(gè)參數(shù)IE下面的狀態(tài)參數(shù). 對應(yīng)FIREFOX是load參數(shù)
//FIXME firefox的load里面的readyState不起作用,還未找到解決方法.
參數(shù)URL表示要加載的JS, control代表一個(gè)控制器,用來控制script的加載是否完成.
下面是控制器的代碼:
CMS.util.ScriptLoadControl=function(_array){
this.a=_array;
this.i=0;
}
CMS.util.ScriptLoadControl.prototype={
next:function(){
if(this.a.length>this.i){
CMS.util.LoadScript(this.a[this.i++],this);
}else{
return false;
}
}
}
其中_array參數(shù)是一個(gè)保存了url地址的數(shù)組.
在使用的時(shí)候,用以下代碼:
var c=new CMS.util.ScriptLoadControl(plugin_url_array);
c.next();
就可以順序的加載JS,以及保證JS的完全加載成功.