0

我有一个静态页面，我正在尝试向其中添加 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 之前调用了加载的处理程序。

4

3 回答 3

2

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

于 2013-05-08T16:01:28.460 回答
1

如果 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);
于 2013-05-08T15:53:39.853 回答
1

至于两者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);
  });
});
于 2013-05-08T16:04:29.877 回答