javascript - Mostrar spinner al cargar un iframe en un Facebox
jquery ruby-on-rails-3 (2)
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.
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í.
prueba este truco de CSS ... ¿es esto lo que intentas hacer?
iframe {
background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}