由于加载 jQuery，脚本被执行/不执行 - 为什么？

Question

这是我遇到的问题。试试这个code：

if (typeof jQuery == 'undefined') {
    function getScript(url, success) {
        var script = document.createElement('script');
        script.src = url;

        var head = document.getElementsByTagName('head')[0];

        done = false;
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null;
                head.removeChild(script);
            };
        };

        head.appendChild(script);
    };

    getScript('http://code.jquery.com/jquery-1.11.2.min.js', function () {
        if (typeof jQuery !== 'undefined') {
            jQuery(document).ready(function ($) {
                MyFunction($);
            });
        }
    });   
} else {
    jQuery(document).ready(function ($) {
        MyFunction($);
    });
}

function MyFunction($) {
    $.getJSON("http://archiesocial.progettiarchimede.it/widget_privacy/test.aspx?asd=1&callback=?", function (d) {
    }).done(function(d) { 
        JsonToHtml(d);
    });
}    

function JsonToHtml(html) {
    var items = [];
    $.each(html, function (key, val) {
        items.push(val);
    });

    $('body').prepend(items.join(''));
} 

您会注意到我的代码检查是否加载了 jQuery。如果没有，它会从外部源加载一个版本；而不是检索 JSON，解析它并“执行它”。

如您所见，加载在正文中的脚本根本没有加载（这是我的问题）。

现在，尝试在 fiddle 中选择一个 jQuery 版本/库（1.8.3 可以）并按下播放：您将看到脚本/按钮渲染：脚本已执行！！！

为什么先加载 jQuery（这里）渲染脚本，然后加载 jQuery 不会执行脚本？你能帮帮我吗？

Answer 1

我认为你最好的选择是强制 onload 事件在它已经被触发时被重新触发，因为当你正在加载 jQuery（如果未定义）时，这个事件已经被触发了。这是一种解决方法：

function JsonToHtml(html) {
    var items = [];
    $.each(html, function (key, val) {
        items.push(val);
    });

    $('body').prepend(items.join(''));
    if (document.readyState === 'complete') { // check if document is complete
        var evt = document.createEvent('Event');
        evt.initEvent('load', false, false);
        window.dispatchEvent(evt); // then redispatch onload event
    }
}

-DEMO-

Answer 2

我认为问题在于范围。 MyFunction() 和 JsonToHtml() 函数超出了范围。 （请记住，您正在使用 getJSON 之类的异步函数）也许我的解释是错误的，但代码有效。 :P

有了这个code，你就没有问题了。

function _test(){}
_test.prototype = {
    hasjQuery: function(){
        if(typeof window.jQuery !='undefined' && !_test.prototype.otherLibrary() ) {
            return true;
        }else{
            return false;
        }
    },
    otherLibrary: function(){
        if (typeof document.$ == 'function') {
            return true;
        }else{
            return false;
        }
    },
    inyectjQuery: function(url, success){
        var script = document.createElement('script');
        script.src = url;
        script.id = "delete";
        done = false;
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null
            }
        };
        document.getElementsByTagName('head')[0].appendChild(script)
    },
    myFunction: function(){
        urljQuery = 'http://code.jquery.com/jquery-latest.min.js';
        if(_test.prototype.hasjQuery()){
            jQuery.getJSON("http://archiesocial.progettiarchimede.it/widget_privacy/test.aspx?asd=1&callback=?", 
                function (d) {
                    _test.prototype.JsonToHtml(d);
                }).done(function() { 
                    console.log("Success getJSON action");
                });
        }else{
            _test.prototype.inyectjQuery(urljQuery, function(){
                if (typeof window.jQuery == 'undefined') {
                    console.log("unable to load jQuery");
                }else{
                    jQuery.getJSON("http://archiesocial.progettiarchimede.it/widget_privacy/test.aspx?asd=1&callback=?", 
                    function (d) {
                        _test.prototype.JsonToHtml(d);
                    }).done(function() { 
                        console.log("Success getJSON action");
                    });
                }
            });
        }
    },
    JsonToHtml: function(html){
        var items = [];
        jQuery.each(html, function (key, val) {
            items.push(val);
        });

        jQuery('body').prepend(items.join(''));
    }
}
test = new _test();
test.myFunction();