Mostra lo spinner fino a quando l'iframe viene caricato con una risposta http post

Question

Ho due siti Web A.com e B.com. Devo incorporare B.com in un iframe in A.com. Non posso apportare modifiche su B.com

B.com funziona solo con richieste di post con alcuni dati di post. Ho funzionato come segue

<!--This is the div inside which I will embedd the iframe--> 
<div id="frameDiv"></div> 

<script type="text/javascript"> 

    //Create iframe 
    var $ifr = $('<iframe name="myFrame" id="myFrame"></iframe>'); 

    //create form 
    var $form = $('<form action="B.com" method="post" target="myFrame"></form>'); 

    //Append hidden field to form to pass postData 
    $form.append($('<input type="hidden" name="dataName"><input>').val('data')); 

    //Append form to the iframe and then append iframe to the div  
    $('#frameDiv').append($ifr.append($form)); 

    $form.submit(); 
</script> 

Ora, B.com carica perfettamente all'interno dell'iframe con risposta alla richiesta di post. Ma B.com è lento. Voglio mostrare uno spinner all'interno del #frameDiv fino a quando i carichi iframe. Come posso fare questo?

Questo è quello che ho provato:

$('#frameDiv').append($spinnerImage) 

//Does not work, fires immediately 
$ifr.load(function(){ 
    //Hide the spinner image 
}); 

//Does not work, fires immediately 
$ifr.ready(function(){ 
    //Hide the spinner image 
}); 

Se B.Com era un semplice get ed è stato impostato come attributo src del iframe, metodo di carico jQuery fa il trucco. Ma in questo caso no.

Ogni aiuto è apprezzato :)

Answer 1

Si può provare vincolante un nuovo listener di eventi di carico all'interno del gestore di eventi caricamento iniziale della iframe. I seguenti lavori sullo stesso dominio iFrame:

$ifr.load(function(){ 
    /* bind new load event listener for next load*/ 
    $(this).load(function(){ 
     /* hide spinner*/ 
    }) 
}); 

Answer 2

@ risposta di charlietfl è corretto e funziona. Volevo solo condividere questo altro metodo che ho scoperto che funziona anche.

basta impostare lo sfondo della iframe per il filatore :)

#myFrame 
{ 
    background-image: url('/content/images/spinner.gif'); 
    background-repeat: no-repeat; 
} 

Quando carichi B.com, il nuovo documento nasconde la filatrice ..

Ha idea di quale approccio è preferito ??