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

Executing jQuery code after loading jQuery via javascript

我想从Google的cdn中加载jquery,如果请求成功,就执行jquery代码,但我似乎无法让它正常工作。以下是我的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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); }
);

任何帮助都会非常感谢


使用以下代码加载jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
(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


});


})();


考虑使用像RequireJS(http://requireJS.org/)这样的东西。你需要一个模块化的系统来获取你的谷歌源代码并加载它,这样它才是可用的。然后,您将能够在加载模块之后执行操作。像你已经开始做的那样,你自己建立这个系统可能需要很多工作。

有关AMD和RequireJ的更多信息,请参阅此问题的答案:动态加载的javascript库何时可用?