Question

我有一个静态页面，我正在尝试添加jQuery和BlockUI插件。在我可以使用BlockUI之前需要首先加载jQuery，虽然我可以正常加载jQuery，但我似乎无法加载BlockUI并调用其加载的处理程序以便我可以完成工作。我确实在我的html页面中看到了BlockUI脚本标记，所以就我所见，它至少可以正常注入。这是我的代码：

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之前调用加载的处理程序。

Answer 1

您应该考虑使用http://requirejs.org/或http://headjs.com/这样的脚本加载器，它可以为您解析dependecies树并使代码更清晰。

Answer 2

如果BlockUI依赖于jQuery，则需要按顺序加载它。你可以这样做：

//This function creates a script element using "resource" and
//adds it to the head. callback is used as the onload callback
//for the script
function loadScript(resource, callback) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");

    script.type = "text/javascript";
    script.src = resource + "?t=" + new Date().getTime(); //prevent caching

    if (callback) {
        script.onload = callback;
    }

    head.appendChild(script);
}

//Array of scripts to load
var resources = [
        "/glptools/scripts/jquery-1.9.1.min.js",
        "/glptools/scripts/blockui/jquery.blockUI.js"
];

//This function will load the scripts one after the other, using a callback
//that calls this function itself.
function load(i) {
    if(i < resources.length) {
        loadResource(resources[i], function() {                
            load(++i);
        });
    } else {
        //Everything has finished loading so you can start
        //using jQuery and BlockUI
    }
}

load(0);

Answer 3

如果jQuery和BlockUI位于与您的网页相同的来源，您可以将jQuery和BlockUI脚本作为文字，连接它们并添加到文档为合并脚本。就像这样：

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

链接动态加载的javascript

3 个答案: