小部件构建：未捕获的TypeError：对象[object Object]没有方法'fancybox'

Question

为什么这样做有效：http://jsfiddle.net/w82W8/1/ 但这不是吗？：http://jsfiddle.net/w82W8/2/

这个问题可能看似令人费解;你可能想知道，为什么不使用第一个！？为什么使用jQuery加载可以轻松加载到原始HTML中的JS + CSS资源。

好吧，我正在构建一个Web小部件，我想保持嵌入代码尽可能小。我们的想法是让用户在其代码中包含单个<script type='text/javascript' src='http://mysite.com/widget.js'></script>行，并且widget.js代码将处理所有细节。包括抓取fancybox。

我收到错误：未捕获TypeError：对象[object Object]没有方法'fancybox'

我假设javascript没有等待加载fancybox.js，并立即尝试将fancybox（）应用于触发器。加载资产后，我可以在这里进行回调吗？我确定他们已经被纳入DOM中了......我已经使用Chrome Tools进行了检查。

我知道之前已经在StackOverflow上询问了这个问题，但在此上下文中却没有。

谢谢，祝节日快乐！

Answer 1

在第二种方法中，在加载Fancybox插件之前调用fancybox方法。如果要在加载脚本后执行代码，请使用getScript方法。

示例：

$.getScript(
    "http://jordanarsenault.com/fancy/fancybox.js",
    function(){
       $(".trigger").fancybox();
    }
);

如果您需要高级资源加载程序，请考虑使用真正的加载程序，例如yepnope。

Answer 2

因为脚本没有立即加载。您必须使用$.getScript并提供如下回调：http://jsfiddle.net/w82W8/3/。

$.getScript("http://jordanarsenault.com/fancy/fancybox.js", function() {
    $(".trigger").fancybox(); // only run when script is loaded
});