Question

所以我正在开发一个简单的javascript小部件，我是通过followinf this教程启动的。我正在动态加载jquery，如下所示：

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '2.1.4') {

更新，以下是我如何加载jQuery

var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js");
 document.documentElement).appendChild(script_tag);        

//Once loaded load other javascripts
if (this.readyState == 'complete' || this.readyState == 'loaded') {

    scriptLoadHandler();

  }
}

以下是我的scriptLoadHandler功能：

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();
    }

现在，在主要方法中，我尝试加载这样的Bootstrap js：

    function main() {

        console.log("undefined" == typeof jQuery);

        var head = document.getElementsByTagName("head")[0];
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js";
        head.appendChild(js);

    }

但即使它们加载的顺序正确，当它检查控制台日志时它仍然给我上面的错误，它给了我false这意味着定义了jQuery。

Answer 1

在引导加载请求之前检查是否加载了JQuery。如果JQuery尚未加载，则无法加载bootstrap

Answer 2

//Load jquery here

你没有在那里加载jQuery。

您应该在此脚本之前使用src在jQuery lib位置创建一个SCRIPT元素，或者在我引用的行之后动态加载它（即创建脚本标记，设置src到您的jquery lib相对或绝对URL / URI，添加onloaded事件处理程序以执行scriptLoadHandler并最终将新脚本附加到DOM）

最简单的方法是在您正在使用的脚本之前通过脚本标记加载脚本。

编辑：经过OP的更多信息，这是解决方案：

检查jQuery的版本：如果它不是你想要的版本，请加载它。
在您加载了所需的jQuery版本之后（或者如果它已经加载了），请加载Bootstrap。

JSFiddle：http://jsfiddle.net/1h6emjwu/2/

    function loadScript(src, callback) {
        var js = document.createElement('script');
        js.src = src;
        js.type = 'text/javascript';

        if (typeof callback === 'function') {
            js.addEventListener('load', callback);
        }

        document.body.appendChild(js);
    }

    var myScript = function () {
        //alert(window.jQuery.fn.jquery);
        alert($.fn.modal ? 'Bootstrap loaded' : 'Bootstrap not loaded');
    }

    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '2.1.4') {
        window.oldJQuery = window.jQuery; // so that you can return back whenever you want
        loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', function () {
            loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', myScript);
        });
    } else {
        loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', myScript);
    }

错误：Bootstrap的JavaScript需要jQuery

2 个答案: