javascript - 在 facebox 中加载 iframe 时显示微调器

Question

我正在使用 jQuery facebox打开一个新窗口以使用 Devise/Omniauth 对 Facebook 用户进行身份验证在我的 Rails 应用程序中。

起初我想简单地将其加载到一个 div 中，如下所示:

$('#facebook-auth').live 'click', ->       
  $.facebox '<div id="foo"></div>'
  $('#foo').load $(this).attr 'href'
  false

但问题是这行不通，因为有多个重定向。第一个链接打开 /auth/facebook，它重定向到 graph.facebook.com，它重定向回我的回调 url，最终重定向到确认页面。我需要向用户显示确认页面。我现在的工作方式是打开一个外部窗口，如下所示:

$('#facebook-auth').live 'click', ->
  width = 600
  height = 400
  left = (screen.width / 2) - (width / 2)
  top = (screen.height / 2) - (height / 2)
  window.open $(this).attr('href'), 'authPopup', "menubar=no,toolbar=no,status=no,width=#{width},height=#{height},toolbar=no,left=#{left},top=#{top}"
  false 

有没有办法让我打开一个新窗口并将其内容加载到 facebox 中？或者有更好的方法吗？

编辑

感谢 Jared 的建议，我能够使用来自 here 的 iFrame mod 来做到这一点.参见 this jsFiddle .但是，我想在加载 iframe 内容时显示加载微调器。这可能吗？根据文档，正常的做法是这样的:

$(".badge").live "click", ->
  $.facebox ->
    $.get "page.html", (data) ->
      $.facebox data
  false

但我不确定如何使用 iframe mod 执行此操作。

Answer 1

试试这个 CSS 技巧..这是你想要做的吗？

http://jsfiddle.net/7CBjn/3/

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}