Javascript新加入動態載入js檔案功能

 

/**
*    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中調用成功，彈出提示。