javascript - 小部件构建 : Uncaught TypeError: Object [object Object] has no method 'fancybox'

Question

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

这个问题可能看起来很复杂；您可能想知道，为什么不直接使用第一个!？为什么使用 jQuery 来加载 JS+CSS 资源，而这些资源可以轻松加载到原始 HTML 中。

嗯，我正在构建一个网络小部件，我希望使嵌入代码尽可能小。这个想法是让用户包含一个<script type='text/javascript' src='http://mysite.com/widget.js'></script>在他们的代码中添加一行，widget.js 代码将处理所有细节。包括获取 fancybox。

我收到错误:未捕获类型错误:对象 [object Object] 没有方法“fancybox”

我假设 javascript 不会等待 fancybox.js 加载，并立即尝试将 fancybox() 应用于触发器。当资源加载完毕后，我可以在这里得到回调吗？我确信它们会被包含在 DOM 中...我已经使用 Chrome 工具进行了检查。

我知道这个问题之前曾在 StackOverflow 上被问过，但不是在这种情况下。

谢谢，节日快乐!

Answer 1

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

示例:

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

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