在Facebox中加载iframe时显示加载动画

Question

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

起初，我想简单地将其加载到一个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的建议，我使用来自这里的iFrame mod实现了这一点。请参见这个jsFiddle。但是，在iframe内容加载时，我想显示加载旋转图标。这可能吗？根据文档，通常的做法是这样的：

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

但是我不确定如何在iframe模式下实现这个。

- CodeWombat

---

我相信你可以在Facebox中使用IFRAME。 - Jared Farrish

你控制确认页面吗？ - invertedSpear

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%;
}

- Richard Andrew Lee

---

请注意，加载 GIF 不再起作用...因此，任何尝试此操作的人，在测试时只需链接到新图像即可。 - HappyCoder

Answer 2

你可以展示一个加载动画，然后不断检查 iframe 是否已经加载完成，或者使用 iframe 的 onload 事件处理程序。

对于重定向的情况我不是很确定会怎么样，但你可以尝试类似 这样 的方法。

- Guard

---

提供的链接已经失效。 - Jonny White