动态加载小部件的jQuery和Script标记

Question

我正在创建一个嵌入第三方网站的小部件。我正在动态创建脚本标签，以加载jQuery版本和我的其他内部java脚本文件。当我动态创建脚本标签时，它会抛出一个错误： 1.未捕获的TypeError：无法读取属性＆＃39; fn＆＃39;未定义的 2.未捕获的错误：Bootstrap的JavaScript需要jQuery

我知道第二个错误意味着你的jQuery没有被加载。但是当我查看元素选项卡中的脚本标签时，我可以在顶部看到jQuery脚本标签。

我正在关注本教程： http://alexmarandon.com/articles/web_widget_jquery/

以下是我的代码：

     (function() {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.1') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js");
        if (script_tag.readyState) {
          script_tag.onreadystatechange = function () { // For old versions of IE
              if (this.readyState == 'complete' || this.readyState == 'loaded') {
                  scriptLoadHandler();
              }
          };
        } else {
          script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        /******* Load CSS *******/


        var script2URL = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js";
        var script3URL = "http://localhost:8080/iam/scripts/bootstrap3-typeahead.min.js";
        var script4URL = "https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js";
        var script5URL = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js";
        var scripts = [script2URL,script3URL,script4URL,script5URL];

        var cssURL1 = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
        var cssURL2 = "http://localhost:8080/iam/css/typeaheadjs.css";
        var cssURL3 = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css";
        var cssURL4 = "http://localhost:8080/iam/css/typeahead_ext.css";
        var cssURL5 = "http://localhost:8080/iam/css/ePass.css";
        var cssURLs = [cssURL1,cssURL2,cssURL3,cssURL4,cssURL5];

        //This function loads all the CSS Files 
        for(var iCount=0;iCount< scripts.length;iCount++){  

            var script_link = $("<script>", { 
                type: "text/javascript", 
                src: scripts[iCount]
            });
            script_link.appendTo('head');          
        }   

    //This function loads all the CSS Files 
    for(var iCount=0;iCount< cssURLs.length;iCount++){  

        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: cssURLs[iCount]
        });
        css_link.appendTo('head');          
    }
        /******* Load HTML *******/
        var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
        $.getJSON(jsonp_url, function(data) {
          $('#example-widget-container').html("This data comes from another server: " + data.html);
        });
    });
}

})();