Show spinner while loading an iframe in a facebox

Question

I am using jQuery facebox to open a new window for authenticating Facebook users with Devise/Omniauth in my rails app.

At first I wanted to simply load this in a div like so:

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

But the problem is that this will not work because there are multiple redirects. The first link opens /auth/facebook, which redirects to graph.facebook.com, which redirects back to my callback url, which finally redirects to a confirmation page. I need to display the confirmation page to the user. The way I have it working right now is by opening an external window like this:

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

Is there a way for me to open a new window and load its contents in the facebox? Or is there a better approach?

Edit

Thanks to Jared's suggestion I was able to do this using an iFrame mod from here. See this jsFiddle. However I would like to show the loading spinner while the iframe content is loading. Is this possible? According to the documentation, the way to do it normally is like this:

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

But I'm not sure how to do this with the iframe mod.

Rios

You could use an IFRAME in the Facebox I believe. – Suction

do you control the confirmation page? – Lighter

Answer 1

try this css trick.. is this what you are trying to do?

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

Spiro

Note that the loading gif is no longer working... so anyone who tries this, just link to a new image when testing. – Vookles

Answer 2

Well, you can probably show a spinner, then constantly check if an iframe finished loading, or use iframe's onload event handler.

Not completely sure how will it work with redirects, but you could try smth like that.

Martynne

The link provided is broken. – Egregious