鏈接動態加載javascript

我有一個靜態頁面，我試圖添加jQuery和BlockUI插件。在我可以使用BlockUI之前，需要首先加載jQuery，並且我可以加載jQuery，但我似乎無法讓BlockUI加載並調用其加載的處理程序，因此我可以執行此操作。我在我的html頁面中看到了BlockUI腳本標記，所以至少按照我所見，它至少被注入了。這是我的代碼：鏈接動態加載javascript

var jqueryScript = document.createElement("script"); 
jqueryScript.src = "/glptools/scripts/jquery-1.9.1.min.js"; 
if (jqueryScript.addEventListener) { 
    jqueryScript.addEventListener("load", jqueryReady, false); 
} 
else if (jqueryScript.readyState) { 
    jqueryScript.onreadystatechange = jqueryReady; 
} 
document.getElementsByTagName('head')[0].appendChild(jqueryScript); 

function jqueryReady() { 
    if (typeof jQuery != 'undefined') { 
     $(document).ready(function() { 
      //Initialize Tabber 
      tabberAutomatic(""); 

      // Add BlockUI plugin 
      var blockUIScript = document.createElement("script"); 
      blockUIScript.src = "/glptools/scripts/blockui/jquery.blockUI.js"; 
      if (blockUIScript.addEventListener) { 
       blockUIScript.addEventListener("load", blockUIReady, false); 
      } 
      else if (blockUIScript.readyState) { 
       blockUIScript.onreadystatechange = blockUIReady; 
      } 
      document.getElementsByTagName('head')[0].appendChild(blockUIScript); 
     }); 
    } 
} 

function blockUIReady() { 
    $("#tabbertabhide").each(function (index, elem) { 
     $(elem).block(); 
    }); 
}

我的目標是使用BlockUI來阻止位於我的頁面上的選項卡。我嘗試將塊ui加載代碼放在ready（）調用之外，但是在加載jQuery之前調用加載的處理程序。

來源

2013-05-08 Nicros

BlockUI是否依賴於jQuery？ – 2013-05-08 15:48:29

爲什麼不使用'

你應該考慮使用腳本加載程序，如http://requirejs.org/或http://headjs.com/可以解決依賴條件樹爲您和使代碼更清潔。

來源

2013-05-08 16:01:28 MDerks

這是一個有趣的想法，除了我仍然需要動態加載腳本加載程序 - 然後加載其他腳本。不是世界末日，但我認爲我喜歡Vivin的解決方案最好 – Nicros 2013-05-08 17:12:03

只是爲了後人，我沒有最終使用head.js-我只需要通過我的文章中的方法加載腳本，然後使用head.js加載其他腳本。 – Nicros 2013-05-09 15:23:03

至於雙方jQuery和BlockUI都位於相同的來源你的頁面，你可以得到jQuery和BlockUI腳本，文本，CONCAT並添加到文檔合併腳本。就像這樣：

function createXMLHttp() { 
    //Initializing our object 
    var xmlHttp = null; 
    //if XMLHttpRequest is available then creating and returning it 
    if (typeof(XMLHttpRequest) != undefined) { 
    xmlHttp = new XMLHttpRequest; 
    return xmlHttp; 
    //if window.ActiveXObject is available than the user is using IE...so we have to create the newest version XMLHttp object 
    } else if (window.ActiveXObject) { 
    var ieXMLHttpVersions = ['MSXML2.XMLHttp.5.0', 'MSXML2.XMLHttp.4.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp', 'Microsoft.XMLHttp']; 
    //In this array we are starting from the first element (newest version) and trying to create it. If there is an 
    //exception thrown we are handling it (and doing nothing) 
    for (var i = 0; i < ieXMLHttpVersions.length; i++) { 
     try { 
      xmlHttp = new ActiveXObject(ieXMLHttpVersions[i]); 
      return xmlHttp; 
     } catch (e) { 
     } 
    } 
    } 
} 

function getData(url, callback) { 
    var xmlHttp = createXMLHttp(); 
    xmlHttp.open('get', url, true); 
    xmlHttp.send(null); 
    xmlHttp.onreadystatechange = function() { 
    if (xmlHttp.readyState === 4) { 
     if (xmlHttp.status === 200) { 
     callback(xmlHttp.responseText); 
     } 
    } 
    }; 
} 

getData('/glptools/scripts/jquery-1.9.1.min.js', function(jQuery) { 
    getData('/glptools/scripts/blockui/jquery.blockUI.js', function(blockUi) { 
    var head = document.getElementsByTagName("head")[0], 
     script = document.createElement('script'); 
    script.innerHTML = jQuery + ';' + blockUi; 
    head.appendChild(script); 
    }); 
});

來源

2013-05-08 16:04:29 Vadim

我認爲ActiveXObject是IE特定的，對吧？我也想過這種方法，但希望有一個更清潔的方法。 – Nicros 2013-05-08 17:10:48

相關問題