学步园

 

/**
*    SII.dyLoader 动态加载Javascript文件
*     @param js{string} : js文件的完整路径
*     @param id{string} : 此Javascript文件的id
*     @param callback{function} : 此Javascript文件载入后的cb
*     @return 无返回值
*/
       
SII.dyLoader=function(js,id,callback)
{
    var scriptId = document.getElementById(id);
    if (scriptId)
    {
        if (callback)
            callback();
    }
    else{
        var script = document.createElement("script");
        script.id = id;
        script.type = "text/javascript";
       
        script.onload = script.onreadystatechange = function()
        {
            if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')
            {
            return;
            }
            script.onreadystatechange = script.onload = null;
            if (callback)
            callback();
        };
        script.src = js;
        var head = document.getElementsByTagName('head').item(0);
        head.appendChild (script);
    }
};

说明：
动态载入JS文件的几种思路

No.1直接document.write

<script language="javascript">
document.write("<script src='test.js'><\/script>");
</script>

No.2动态改变已有script的src属性

<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>

No.3动态创建script元素

<script>
var s2 = document.createElement("script");
s2.src="test.js"
document.body.insertAdjacentElement("BeforeBegin",s2);
</script>

基于prototype的scriptaculous（好像是这么写）
在载入的时候使用document.write，前面有一句注释，大意是说动态操作dom节点不被支持safari2.0

基于此

/**
*    SII.staticLoader 动态加载Javascript文件
*     @param js{string} : js文件的完整路径
*     @return 无返回值
*/
SII.staticLoader = function(js){
    document.writeln("<scri"+"pt src='"+js+"' type='text/javascript'></sc"+"ript>");
};
   

我们有静态loader方法。但是这个存在一个问题。
document.write 方法一旦执行会重写html->body，导致页面空白
正确的做法是在载入外部文件后立即关闭<script>。

但是，这样我们又产生另一问题，这样我们载入js文件的动作就不是动态了，也就是说我们不能这样做了

SII.staticLoader('a.js');
SII.loading....

只能这样

SII.staticLoader('a.js');
</script>
<script>
SII.loading....
</script>

而上面那种方式又跟下面这种有啥区别呢。

<script type='text/javascript' src='a.js'></script>

所以，document.write方法被抛弃。

继续钻研dom节点的方式，
也就有了最后的结果。。不过不知道能不能支持safari2.0
实际上，能下载到的最低也是safari3.0了，目前都是用4.0

测试一下：
在首页载入首页没有加载的js文件，并且调用
        SII.dyLoader("http://static.zhongle.com/js/Guide.js","guide",function(){alert(Guide.AUTHOR);});
在FF，IE6，Safari3，Safari4中调用成功，弹出提示。