Hiển thị spinner trong khi tải iframe trong facebox

Question

Tôi đang sử dụng jQuery facebox để mở cửa sổ mới để xác thực người dùng Facebook bằng Devise/Omniauth trong ứng dụng đường ray của tôi.

Lúc đầu, tôi muốn chỉ đơn giản là tải này trong một div như vậy:

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

Nhưng vấn đề là điều này sẽ không làm việc vì có nhiều chuyển hướng. Liên kết đầu tiên mở ra /auth/facebook, chuyển hướng đến graph.facebook.com, chuyển hướng trở lại url gọi lại của tôi, cuối cùng chuyển hướng đến trang xác nhận. Tôi cần hiển thị trang xác nhận cho người dùng. Cách tôi hoạt động ngay bây giờ là mở một cửa sổ bên ngoài như thế này:

$('#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ó cách nào để mở một cửa sổ mới và tải nội dung của nó trong bảng điều khiển không? Hoặc là có một cách tiếp cận tốt hơn?

Sửa

Nhờ gợi ý của Jared tôi đã có thể làm điều này bằng một mod iFrame từ here. Xem this jsFiddle. Tuy nhiên, tôi muốn hiển thị bộ nạp đang tải trong khi nội dung khung nội tuyến đang tải. Điều này có thể không? Theo tài liệu, cách thực hiện bình thường như sau:

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

Nhưng tôi không chắc chắn cách thực hiện điều này với mod khung nội tuyến.

Answer 1

thử mẹo css này .. đây có phải là những gì bạn đang cố gắng làm không?

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

Vâng, bạn có thể hiển thị trình quay số, sau đó liên tục kiểm tra xem iframe đã tải xong hay sử dụng trình xử lý sự kiện onload của khung nội tuyến.

Không hoàn toàn chắc chắn nó sẽ hoạt động như thế nào với chuyển hướng, nhưng bạn có thể thử smth như that.