Question

在我的.js文件中将由外部用户使用我想检查是否在他们的页面上加载了jQuery lubrary。为此，我使用：

if (!window.jQuery) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}    

$(document).ready(function () {
    //do some jquery $.ajax({}); stuff
});

但是，在$(document).ready(function () {行，我收到错误消息ReferenceError: $ is not defined如何解决？

编辑：

我添加了

行

if (!window.jQuery) {
    ...
    document.getElementsByTagName('head')[0].appendChild("<script type='text/javascript'>$(document).ready(function () {...});</script>");
}

现在我得到了NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMHTMLHeadElement.appendChild]

Answer 1

在这种情况下，人们通常会被要求尝试像require.js这样的事情...... 如果您不想使用它，可以尝试设置自己的处理程序以捕获jquery完成加载的时刻。

if (!window.jQuery) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

    var loadHandlerAlreadyRun = false;
    script.onload = function() {
        if (!loadHandlerAlreadyRun) {
           loadHandlerAlreadyRun = true;
           onLoadHandler();
        }
    };
    script.onreadystatechange = function() {
        if (!loadHandlerAlreadyRun && (this.readyState === "loaded" || this.readyState === "complete")) {
            loadHandlerAlreadyRun = true;
            onLoadHandler();
        }
    }
}    

function onLoadHandler() {
    $(document).ready(function () {
        console.log("jquery loaded");
        //do some jquery $.ajax({}); stuff
    });

}

试试here

Answer 2

删除document.ready部分，并在用于将jQuery附加到头部的单独脚本标签下方执行此操作：

<script>
 window.onload = function() {
   //do the same code in here as you would've done in document.ready
 }
</script>

修改

下面的评论很有意义......在这种情况下，你这样做：

<script> (function() { var load = function() { //do the same code in here as you would've done in document.ready }; if(window.addEventListener) { window.addEventListener('load',load); } else { window.attachEvent('onload',load); } }()); </script>

Answer 3

您可以查看代码：

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}

Answer 4

像这样的东西

if( window.jQuery === undefined ) {
    //create script tag for appending script source
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    //check for IE
    if( scriptTag.readyState ) {
        scriptTag.onreadystatechange = function() {
            if( scriptTag.readyState == 'loaded' || scriptTag.readyState == 'complete' ) {
                scriptTag.onreadystatechange = null;
                scriptHandler();
            }
        };
    }
    else {
        scriptTag.onload = function() {
            scriptHandler();
        };
    }
    scriptTag.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js";
    ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( scriptTag );
}
else {
    jQuery = window.jQuery;
    process();
}

function scriptHandler() {
    jQuery = window.jQuery.noConflict( true );
    process();
}
function process() {
    jQuery(document).ready(function($) {
        //use $ here
    });
}

测试是否加载了jQuery库并且未定义＆＃39; $＆＃39;错误

编辑：

4 个答案: