Question

对于我的后端，我想在检测到某些元素时自动加载javascript文件。这是一个例子：

if($('.wysiwyg').length>0) {
     include('javascript/ckeditor/ckeditor.js');
     $(".wysiwyg").ckeditor();
}

但是当我执行代码时，我得到$(".wysiwyg").ckeditor is not a function，因为似乎浏览器仍在加载或解析之前包含在该行上的javascript文件。如果我在函数之前放置了一个警告弹出窗口，它会起作用，因为它会“暂停”我猜的脚本并给它时间加载文件。

有没有办法可以知道文件何时实际加载，以便可以执行后面的代码？

修改：似乎我过早地问了这个问题。我找到了解决此问题的回调函数的e.onload属性。如果其他人可能偶然遇到同样的问题，这就是我的职责：

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


if($('.wysiwyg').length>0) {
    include('javascript/ckeditor/ckeditor.js', function() {
        $(".wysiwyg").ckeditor();
    });
}

Answer 1

为什么不使用内置的基于ajax的getScript？
它还有一个回调机制，只有在成功加载所需的脚本后才能执行某些代码：

function include(script,callback){
    $.getScript(script, function() {
        if(typeof callback == 'function')
        callback.apply({},arguments);
    });
}

然后您可以这样使用它：

if($('.wysiwyg').length>0) {
    include('javascript/ckeditor/ckeditor.js',function(){
        $(".wysiwyg").ckeditor();
    });
}

Answer 2

当你使用带有promises的jQuery时，你可以使用上面代码的修改版本，如下所示：

function include(srcURL) {
    var deferred = new $.Deferred();
    var e = document.createElement('script');
    e.onload = function () { deferred.resolve(); };
    e.src = srcURL;
    document.getElementsByTagName("head")[0].appendChild(e);
    return deferred.promise();
}

然后你可以使用上面的代码和'$ .when（include（'someurl.js'））'调用。这将让你拥有

全局窗口上下文（CKEditor需要）
在执行解析之前推迟执行其他代码的能力
一个不需要回调的脚本和要传递的回放的上下文，因为jQuery正在处理它包含的promises功能。

我希望这可以帮助那些正在寻找更多回调的人，并且可以使用jQuery的promises / deferred功能加载多个脚本。

Answer 3

你也可以试试YepNope - 条件javascript加载器

yepnope是一个异步的条件资源加载器超快，并允许您只加载您的用户的脚本需要。

Answer 4

你可以这样做

$(document).ready(function()
{
 if($('.wysiwyg').length>0) {
       $('head').append('<script language="javascript" src="javascript/ckeditor/ckeditor.js"></script>');
     $(".wysiwyg").ckeditor();
}

});

Answer 5

Modernizr可以为您做到这一点。请参阅此MetaFlood article: Use jQuery and Modernizr to load javascript conditionally, based on existence of DOM element。

有条件的javascript加载

5 个答案: