javascript - 按需添加 jQuery 并使用 $?

Question

我有一个文本框和一个按钮：

如果文本框内的值是1（只是模拟一个条件））我需要动态加载 jQuery 并使用一个document Ready函数：

我试过这个：

function work() //when button click
{
        if (document.getElementById('tb').value == '1')
        {
                if (typeof jQuery == 'undefined')
                {
                        var script = document.createElement('script');
                        script.src = "http://code.jquery.com/jquery-git2.js";
                        document.getElementsByTagName('head')[0].appendChild(script);
                        $(document).ready(function ()
                        {
                                alert('');
                        });
                }
        }
}

但它说：

Uncaught ReferenceError: $ is not defined

我认为这是因为该行：$(document).ready(function ()....

但我不明白为什么会出现问题，因为我在使用之前加载 jQuery $...

问题 ：

如何修复我的代码以按需要工作？

JSBIN

Answer 1

您缺少脚本onload处理程序：

var script = document.createElement('script');
// do something with script
// onload handler
script.onload = function () {
     // script was loaded, you can use it!    
};

你的功能变成：

function work() {

    if (document.getElementById('tb').value != '1') { return; }
    if (typeof jQuery != 'undefined') { return; }

    // jQuery is undefined, we will load it
    var script = document.createElement('script');
    script.src = "http://code.jquery.com/jquery-git2.js";
    document.getElementsByTagName('head')[0].appendChild(script);

    // load handler
    script.onload = function () {
        // jQuery was just loaded!
        $(document).ready(function () {
            alert('');
        });
    };
}

另外，不要忘记script.onreadystatechangeIE 兼容性。

script.onreadystatechange = function () {
    if (script.readyState === 'loaded' || script.readyState === 'complete') {
        // script was loaded 
    }
}

YepNope似乎也是一个不错的选择。

JSBIN 演示

Answer 2

在这种情况下，使用YepNope可能是一个不错的选择。

yepnope([
    {
        test: window.jQuery,
        nope: 'path/url-to-jquery.js',
        complete: function() {
            $(document).ready(function() {
                //whatever you need jquery for
            });
        }
    }
]);

你可以把它放在你的文档的头部，如果没有定义 window.jQuery，它只会加载 jquery。它比script.onloador更可靠（也更简单） script.onreadystatechange。complete只有在加载 jquery 后才会调用回调，因此您可以确定$将在此时定义。

注意：如果您在您的网站上使用 Modernizr.js，则很有可能 yepnope 已经捆绑到该脚本中。