DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS動態加載腳本並執行回調操作
JS動態加載腳本並執行回調操作
編輯:關於JavaScript     

關於在javascript裡面加載其它的js文件的問題可能很多人都遇到過,但很多朋友可能並不知道怎麼判斷我們要加載的js文件是否加載完成,如果沒有加載完成我們就調用文件裡面的函數是不會成功的。本文講解怎麼在js中加載其它js文件並在加載完成後執行回調函數。 

我們可以動態的創建 <script> 元素,然後通過更改它的 src 屬性來加載腳本,但是怎麼知道這個腳本文件加載完成了呢,因為我們有些函數需要在腳本加載完成生效後才能開始執行。
經過對網絡上資源的搜索,我發現在 IE 浏覽器中可以使用 <script> 元素的 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]);
  }
}

在這裡是把 <script> 標簽動態的插入到頁面中的 <head> 標簽內部,並且加載完成後標簽元素會被自動移除。
細心的你還會發現,這裡使用了一種稱作條件編譯的方法作為表達式(!/*@cc_on!@*/0)來判斷是否非 IE 浏覽器,關於條件編譯並不是本文的重點,有興趣的您可以上網查找相關資料進行學習。 

這兩個函數的使用方法: 這裡我們聲明了一個數組變量,裡面包含了兩個遠程的JS文件地址(當然 <script> 標簽調用腳本是支持跨域的): 

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%',
    itemDivider : '<hr>',
    listDOM : 'all'
  }); 

  */
  alert('腳本加載完成啦');
});

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved