Mostra lo spinner durante il caricamento di un iframe in una face box

Question

Sto utilizzando jQuery facebox per aprire una nuova finestra per l'autenticazione degli utenti di Facebook con Devise/Omniauth nella mia app di rotaie.

All'inizio volevo caricare semplicemente questo in un div in questo modo:

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

Ma il problema è che questo non funziona perché ci sono più reindirizzamenti. Il primo collegamento si apre /auth/facebook, che reindirizza a graph.facebook.com, che reindirizza nuovamente al mio url di richiamata, che infine reindirizza a una pagina di conferma. Devo visualizzare la pagina di conferma per l'utente. Il modo in cui l'ho a lavorare in questo momento è con l'apertura di una finestra esterna in questo modo:

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

C'è un modo per me di aprire una nuova finestra e caricare il contenuto nel Facebox? O c'è un approccio migliore?

Modifica

Grazie al suggerimento di Jared sono stato in grado di fare questo con un mod iFrame da here. Vedi this jsFiddle. Comunque mi piacerebbe mostrare lo spinner di caricamento mentre il contenuto di iframe si sta caricando. È possibile? Secondo la documentazione, il modo per farlo normalmente è come questo:

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

Ma io non sono sicuro di come fare questo con il mod iframe.

Answer 1

prova questo trucco di css .. è questo che stai cercando di fare?

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

Answer 2

Bene, puoi probabilmente mostrare uno spinner, quindi controllare costantemente se un iframe ha terminato il caricamento o utilizzare il gestore di eventi onload dell'iframe.

Non completamente sicuro come funzionerà con i reindirizzamenti, ma è possibile provare con smth come that.