javascript - Mostrar spinner al cargar un iframe en un Facebox

jquery ruby-on-rails-3

Question

Estoy usando jQuery facebox para abrir una nueva ventana para autenticar usuarios de Facebook con Devise / Omniauth en mi aplicación Rails.

Al principio, simplemente quería cargar esto en un div así:

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

Pero el problema es que esto no funcionará porque hay múltiples redireccionamientos. El primer enlace abre /auth/facebook , que redirige a graph.facebook.com , que redirige a mi url de devolución de llamada, que finalmente redirige a una página de confirmación. Necesito mostrar la página de confirmación al usuario. La forma en que lo tengo trabajando en este momento es abriendo una ventana externa como esta:

$(''#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 

¿Hay alguna manera de abrir una nueva ventana y cargar su contenido en la ventana frontal? ¿O hay un mejor enfoque?

Editar

Gracias a la sugerencia de Jared, pude hacer esto usando un mod de iFrame desde aquí . Vea este jsFiddle . Sin embargo, me gustaría mostrar el spinner de carga mientras se carga el contenido del iframe. es posible? De acuerdo con la documentación, la forma de hacerlo normalmente es así:

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

Pero no estoy seguro de cómo hacer esto con el mod iframe.

Answer 1

Bueno, probablemente puedas mostrar un spinner, luego verificar constantemente si un iframe terminó de cargarse, o usar el controlador de eventos onload de iframe.

No estoy del todo seguro de cómo funcionará con los redireccionamientos, pero podrías intentar algo así.

Answer 2

prueba este truco de CSS ... ¿es esto lo que intentas hacer?

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