如何使用javascript載入腳本並執行回呼程式碼實例詳解

我們可以動態的建立3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素，然後透過更改它的src 屬性來載入腳本，但是怎麼知道這個腳本檔案載入完成了呢，因為我們有些函數需要在腳本載入完成生效後才能開始執行。 IE 瀏覽器中可以使用 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素的 onreadystatechange 來監控載入狀態的改變，並透過判斷它的 readyState 是 loaded 或 complete 來判斷腳本是否載入完成。而非 IE 瀏覽器可以使用 onload 來直接判斷腳本是否載入完成。

一個簡單的實作過程看起來是下面這樣的： 

#

//IE下：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function() {
  if(this.readyState == "loaded" || this.readyState == "complete"){
    alert("加载成功啦！");
  }
}
script.setAttribute("src",scripts[i]);

//Opera、FF、Chrome等：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onload = function() {
  alert("加载成功啦！");
}
script.setAttribute("src",scripts[i]);

原理很簡單，根據這兩個簡單的原理，我們進行一些修改，分別是串行加載和並行加載腳本。

當傳一個包含多個JS檔案路徑的陣列時，序列載入函數從第一個腳本檔案載入開始，每載入成功一開始載入下一個腳本文件，全部載入完成後執行回調函數。而並行加載是一開始便加載全部的腳本文件，也就是他們從同一點開始加載，當全部加載完成後，執行回調函數。 

經過測試，這兩個函數相容於目前的所有主流瀏覽器。

/** 
 * 串联加载指定的脚本
 * 串联加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */
function seriesLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
  var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //递归
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback();
      }
    }
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  };
  recursiveLoad(0);
}
 

/**
 * 并联加载指定的脚本
 * 并联加载[同步]同时加载，不管上个是否加载完成，直接加载全部
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */

function parallelLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0;
  for(var i=0; i<scripts.length; i++) {
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        loaded++;
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(loaded == scripts.length && typeof(callback) == "function") callback();
      }
    };
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  }
}

在這裡是把3f1c4e4b6b16bbbd69b2ee476dc4f83a 標籤動態的插入到頁面中的93f0f5c25f18dab9d176bd4f6de5d30e 標籤內部，並且載入完成後標籤元素會被自動移除。
細心的你還會發現，這裡使用了一種稱作條件編譯的方法作為表達式（!/*@cc_on!@*/0）來判斷是否非IE 瀏覽器，關於條件編譯並不是本文的重點，有興趣的可以上網找相關資料學習。

這兩個函數的使用方法： 這裡我們聲明了一個數組變量，裡麵包含了兩個遠端的JS檔案位址（當然3f1c4e4b6b16bbbd69b2ee476dc4f83a 標籤呼叫腳本是支援跨域的） ： 

var scripts = [ 
  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
  "http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];

//这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
//然后你可以使用下面的方法调用并在成功后执行回调了。

seriesLoadScripts(scripts,function(){ 

  /*
  debug = new $.debug({ 
    posTo : { x:'right', y:'bottom' },
    width: '480px',
    height: '50%',
    itempider : &#39;<hr>&#39;,
    listDOM : &#39;all&#39;
  }); 

  */
  alert(&#39;脚本加载完成啦&#39;);
});

 這裡使用的是串聯載入的函數，當然你也可以使用並聯載入函數，這可以根據情況使用，建議每下一個腳本對上一個腳本有依賴性的使用串聯加載，否則使用並聯，因為原理上並聯要比串聯快那麼些。

以上是如何使用javascript載入腳本並執行回呼程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！