Question

目标

我正在尝试构建一个在我的用户网站上放置浮动按钮的小部件。点击按钮，我会以灯箱的形式显示一个网页表单（位于我的服务器上） - 我目前正在使用Fancybox。

问题

在这种情况下，我的小部件依赖于两个依赖库jQuery和Fancybox。在调用我的fancybox代码加载我的URL之前，如何确保它们都已加载？我曾尝试查看几个SO问题（here，here和here以及其他一些问题）以及Alex Marandon's great tutorial，但它们似乎并不依赖于其他库就像在我的情况下fancybox。

我做了类似下面的事情，但我的主要问题是Fancybox库是使用$.getScript异步加载的，因此在我之后几次调用它们时无法调用。

/******** Our main function ********/
function main() {
jQuery(document).ready(function($) { 
  /******* Load FANCYBOX *******/
  var fancy_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: widgetURL + "fancybox/source/jquery.fancybox.css?v=2.1.5",
    media: "screen"
  });
  fancy_link.appendTo('head');
  var fancy2_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: widgetURL + "fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7",
    media: "screen"
  });
  fancy2_link.appendTo('head');

  var fancyboxScript = widgetURL + "fancybox/source/jquery.fancybox.pack.js?v=2.1.5";
  $.getScript(fancyboxScript);

  var fancyboxScript2 = widgetURL + "fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7";
  $.getScript(fancyboxScript2);

  /******* Load CSS *******/
  var css_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: widgetURL + "myWidget.css" 
  });
  css_link.appendTo('head');

  /******* Load Javascript *******/   

  var widgetJS = widgetURL + "widgetFunction.js";
  $.getScript(widgetJS); 

  /******* Load HTML *******/
  var jsonp_url = widgetURL + "myWidgetCall.php?callback=?";

  $.getJSON(jsonp_url,params, function(data) {
    $('#widget-container').html(data.html);
  });
});
}

我不是这个领域的专家，所以如果还有其他替代方法可以达到上述目标，我将很乐意尝试。

Answer 1

$。getScript有一个回调成功函数：

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

所以，你可以按如下方式进行：

$.getScript(fancyboxScript, function(script, textStatus, jqXHR){ 
      "call your methods here";
});

创建一个使用其他js库的可嵌入javascript小部件

1 个答案: