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.

You could use an IFRAME in the Facebox I believe. – Jared Farrish Sep 01 '11 at 01:07 — Jared Farrish, Sep 01 '11 at 01:07
do you control the confirmation page? – invertedSpear Sep 14 '11 at 23:34 — invertedSpear, Sep 14 '11 at 23:34

score 35 · Accepted Answer · answered Sep 14 '11 at 08:58

35

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

answered Sep 14 '11 at 08:58

Richard Andrew Lee

1,187
6
10

1

Note that the loading gif is no longer working... so anyone who tries this, just link to a new image when testing. – HappyCoder May 19 '16 at 11:03

score 0 · Answer 2 · answered Sep 10 '11 at 22:07

0

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.

answered Sep 10 '11 at 22:07

Guard

6,816
4
38
58

The link provided is broken. – Jonny White Mar 31 '16 at 14:36

Show spinner while loading an iframe in a facebox

2 Answers2