透過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;
});