Показывать спиннер при загрузке фрейма в фейсбокс - PullRequest
Новая
       7

Показывать спиннер при загрузке фрейма в фейсбокс

13 голосов
/ 01 сентября 2011

Я использую jQuery facebox , чтобы открыть новое окно для аутентификации пользователей Facebook с помощью Devise / Omniauth в моем приложении rails.

Сначала я хотел просто загрузить это в div следующим образом: 

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

Но проблема в том, что это не будет работать, потому что существует несколько перенаправлений. Открывается первая ссылка /auth/facebook, которая перенаправляет на graph.facebook.com, который перенаправляет обратно на мой URL обратного вызова, который в итоге перенаправляет на страницу подтверждения. Мне нужно отобразить страницу подтверждения для пользователя. Сейчас я работаю так, открыв внешнее окно, например так: 

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

Можно ли мне открыть новое окно и загрузить его содержимое в лицевую панель? Или есть лучший подход?

Редактировать

Благодаря предложению Джареда я смог сделать это с помощью мода iFrame из здесь . Смотрите этот jsFiddle . Однако я хотел бы показать спиннер при загрузке содержимого iframe. Это возможно? Согласно документации, способ сделать это обычно так: 

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

Но я не уверен, как это сделать с модом iframe.

Ответы [ 2 ]

35 голосов
/ 14 сентября 2011

попробуйте этот трюк css .. это то, что вы пытаетесь сделать?

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%;
}
0 голосов
/ 11 сентября 2011

Что ж, вы, вероятно, можете показать спиннер, а затем постоянно проверять, закончилась ли загрузка iframe, или использовать обработчик события iframe onload.

Не совсем уверен, как он будет работать с перенаправлениями, но вы можете попробовать что-то вроде что .

...