Цепочка динамически загружаемого javascript

У меня статическая страница, которую я пытаюсь добавить jQuery и плагин BlockUI. Прежде чем я могу использовать BlockUI, нужно сначала загружать jQuery, и, хотя я могу просто загрузить jQuery, я не могу заставить BlockUI загружать и вызывать его загруженный обработчик, чтобы я мог выполнять эту работу. Я вижу тег сценария BlockUI на моей странице html, так что, по крайней мере, его можно вставить в порядке, насколько я могу судить. Вот мой код:Цепочка динамически загружаемого 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? –

Почему бы просто не использовать '

Вы должны рассмотреть возможность использования загрузчика скриптов, таких как http://requirejs.org/ или http://headjs.com/, которые могут решить dependecies дерево для вас и сделать код понятнее.

источник

2013-05-08 16:01:28 MDerks

Это интересная идея, за исключением того, что Мне по-прежнему нужно динамически загружать загрузчик сценариев, а затем загружать другие скрипты. Не конец света, но я думаю, что мне нравится решение Vivin наилучшим образом – Nicros

Просто для потомков, я сделал в конечном итоге с использованием head.js- Мне просто нужно было загрузить скрипт с помощью метода в моем сообщении, а затем использовать head.js для загрузки других. – Nicros

Насколько как 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

Смежные вопросы