邓华

BlogJava 联系 聚合 管理
  48 Posts :: 0 Stories :: 149 Comments :: 0 Trackbacks
在CMS的plugin计划中, 需要控制的一项就是页面的JS PLUGIN的动态加载.
一次加载几十个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库.
在这个方法里面是用的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地址的数组.

在使用的时候,用以下代码:
var c=new CMS.util.ScriptLoadControl(plugin_url_array);
        c.next();

就可以顺序的加载JS,以及保证JS的完全加载成功.



posted on 2007-11-28 22:40 邓华的碎碎念 阅读(3146) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: