Question

我有一个JavaScript文件，它也使用jQuery。为了加载它，我写了这段代码：

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';
    head.appendChild(script)
}

include('http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js');
alert("1");

$(document).read(function(){});
alert("2");

这会触发alert("1")，但第二个alert不起作用。当我检查元素时，我看到一个错误，其中$未定义。

我该如何解决这个问题？

Answer 1

只有在加载脚本后才需要执行任何jQuery特定代码，这显然可能会在将其附加到head部分之后的更晚时间点发生：

function include(filename, onload) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
        if (script.readyState) {
            if (script.readyState === 'complete' || script.readyState === 'loaded') {
                script.onreadystatechange = null;                                                  
                onload();
            }
        } 
        else {
            onload();          
        }
    };
    head.appendChild(script);
}

include('http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js', function() {
    $(document).ready(function() {
        alert('the DOM is ready');
    });
});

这是一个live demo。

您还可以查看yepnope或RequireJS等脚本加载器，以便更轻松地完成此任务。

Answer 2

这里的问题可能是，即使您包含脚本，也不意味着在您尝试$(document).ready(function(){});时加载它。您可以查看Google Loader以防止出现此问题http://code.google.com/intl/fr-FR/apis/loader/

在另一个js文件中加载jQuery

2 个答案: