在CMS的plugin计划中, 需要控制的一项就是页面的JS PLUGIN的动态加载.
一次加载几十个plugin的JS是不现实的.只能在需要用到的时候再加载进来.
在一个页面中, 如果我们要加载另外的JS文件进来,有一个方法是
这样会产生一个异步的JS加载, 可以产生一些有趣的应用, 如AJAX效果,跨域调用.
但上面产生的问题,是控制性, 无法控制JS的加载状态及加载顺序,而且只能在页面初始化的时候调用.
为了解决以上问题,需要设计一个JS的加载控制器及动态加载JS的程序.
下面的是一段JS的加载代码:
在这个方法里面是用的DOM的JS加载方法,利用了script的 readystatechange 参数,这个参数IE下面的状态参数. 对应FIREFOX是load参数
//FIXME firefox的load里面的readyState不起作用,还未找到解决方法.
参数URL表示要加载的JS, control代表一个控制器,用来控制script的加载是否完成.
下面是控制器的代码:
在使用的时候,用以下代码:
就可以顺序的加载JS,以及保证JS的完全加载成功.
一次加载几十个plugin的JS是不现实的.只能在需要用到的时候再加载进来.
在一个页面中, 如果我们要加载另外的JS文件进来,有一个方法是
document.write(
"
<script src=''><//script>
"
);
这样会产生一个异步的JS加载, 可以产生一些有趣的应用, 如AJAX效果,跨域调用.
但上面产生的问题,是控制性, 无法控制JS的加载状态及加载顺序,而且只能在页面初始化的时候调用.
为了解决以上问题,需要设计一个JS的加载控制器及动态加载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库.
{
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);
}
在这个方法里面是用的DOM的JS加载方法,利用了script的 readystatechange 参数,这个参数IE下面的状态参数. 对应FIREFOX是load参数
//FIXME firefox的load里面的readyState不起作用,还未找到解决方法.
参数URL表示要加载的JS, control代表一个控制器,用来控制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参数是一个保存了url地址的数组.
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 ;
}
}
}
在使用的时候,用以下代码:
var
c
=
new
CMS.util.ScriptLoadControl(plugin_url_array);
c.next();
c.next();
就可以顺序的加载JS,以及保证JS的完全加载成功.