Javascript 动态加载小部件的jQuery和脚本标记

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

我知道第二个错误意味着jQuery没有加载。但是当我查看元素选项卡中的脚本标记时，我可以看到顶部的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);
        });
    });
}

})();

（函数（）{
//本地化jQuery变量
var-jQuery；
/********如果不存在jQuery，则加载它*********/
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（）{//用于旧版本的IE
如果（this.readyState=='complete'| | this.readyState=='loaded'）{
scriptLoadHandler（）；
}
};
}否则{
script_tag.onload=scriptLoadHandler；
}
//尝试查找头部，否则默认为documentElement
（document.getElementsByTagName（“head”）[0]| | document.documentElement）.appendChild（script_标记）；
}否则{
//窗口上的jQuery版本就是我们想要使用的版本
jQuery=window.jQuery；
main（）；
}
/********加载jQuery后调用******/
函数scriptLoadHandler（）{
//将$和window.jQuery恢复为其以前的值并存储
//本地jQuery变量中的新jQuery
jQuery=window.jQuery.noConflict（true）；
//调用我们的主要函数
main（）；
}
/********我们的主要职能********/
函数main（）{
jQuery（文档）.ready（函数（$）{
/*******加载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]；
//此函数用于加载所有CSS文件
对于（var iCount=0；iCount

看起来jQuery没有加载。任何指针都会有帮助问题可能与您加载jQuery 2x有关（您先加载它，然后再通过

script1URL

）@Gerrat我尝试删除它，但没有成功我会尝试删除所有动态加载的脚本和css文件（原始jQuery除外），然后一次添加一个，试图缩小问题范围。