通过javascript加载jQuery后执行jQuery代码答案

【问题标题】：Executing jQuery code after loading jQuery via javascript通过javascript加载jQuery后执行jQuery代码
【发布时间】：2015-01-15 19:22:37
【问题描述】：

我想从 Google 的 CDN 加载 jQuery，并在请求成功时执行 jQuery 代码，但我似乎无法让它正常工作。这是我的代码：

function loadjQuery(success, error) {
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function() { success(xhr.status, xhr.readyState); }
    xhr.onerror = function() { error(); }
    xhr.open("GET", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", true);
    xhr.send();
}
loadjQuery(
    function(status, state) {
        console.log(status) // 200
        console.log(state) // 4
        console.log($('body')) // Uncaught ReferenceError: $ is not defined
    },
    function() { setTimeout(loadjQuery, 10000); }
);

任何帮助将不胜感激

【问题讨论】：

您从 javascript 文件中加载了文本内容，但没有对其执行任何操作。您可能不应该为此使用 xhr。
我很确定用 AJAX 加载脚本不会执行它。
我应该如何执行我请求的文件？
创建一个 script 元素，给它一个 onload 处理程序，设置它的 src，然后将它附加到 dom。
为什么使用 xhr 请求，为什么不包括一个脚本标签呢？这里，例如，使用 js：stackoverflow.com/a/7474386/1414562

标签： javascript jquery

【解决方案1】：

使用以下代码加载JQuery

(function () {

function loadScript(url, callback) {

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", function () {

     //jQuery loaded
     console.log('jquery loaded');
  console.log($('body') //works


});


})();

【讨论】：

谢谢。节省了我一些时间:)

【解决方案2】：

考虑使用 RequireJs (http://requirejs.org/) 之类的东西。您需要一个模块化系统来获取您的谷歌源代码并加载它，以便它可用。然后，您将能够在加载模块后执行操作。像您开始做的那样，自己构建它可能需要做很多工作。

更多关于 AMD 和 requirejs 的信息可以在这个问题的答案中找到： When does a dynamically loaded JavaScript library become available?

【讨论】：