javascript - 動態載入js (loadScript)

透過function loadScript 來動態載入js,並且確保載入完成之後,

再繼續執行其他動作

傳統載入js的方法,是在<head>標籤內中寫了一個<script src=”…”></script>

如果我要動態載入的話,可以這樣寫

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'XXX.js';  //要載入的js
head.appendChild(script); 

不過在header.appendChild(script)之後我們不能馬上呼叫其中的js。

因為瀏覽器是非同步載入這個js的,我們不知道他什麼時候載入完。

這時候可以通過監聽事件的辦法來判斷js是否載入完成

function loadScript(url, callback, callbackError) {
    var script = document.createElement("script");
    script.type = "text/javascript";

    try {
        if (script.readyState) {  //IE
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  
            //其餘瀏覽器支援onload
            script.onload = function () {
                callback();
            };
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    } catch (e) {
        if (null !== callbackError) callbackError(e);
    }
}

根據參考資料

網頁狀態的變化是如下步驟:
1.uninitialized
2.loading
3.loaded
4.interactive
5.complete

但是在ie7中,只能獲得loaded和completed中的一個,不能都出現,

原因也許是對判斷是不是從cache中讀取影響了狀態的變化,也可能是其他原因。

所以把判斷條件改成script.readyState == ‘loaded’ || script.readyState == ‘complete’

確定JS載入完成之後,再進行callback();

使用方法

loadScript(url, function () {
  // 初始化Google Earth,使用jQuery給予前端div container物件
  // earth_manager 這個物件就是定義在url路徑底下的js內
  // 載入完url路徑底下的js之後,才會開始執行這個function
  earth_manager.init.initGe($('#viewDiv'));
  // 取得gee實體
  ge = earth_manager.vars.ge;
});