Geek asks and answers

Show spinner before loading iframe with response to http message

I have two sites A.com and B.com. I need to embed B.com in an iframe on A.com. I cannot make changes to B.com

B.com only works with mail requests with some messages. I work as follows

<!--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>

Now B.com loads perfectly in the iframe with a response to the send request. But B.com is slow. I want to show the spinner inside #frameDiv before loading the iframe. How can i do this?

This is what I tried:

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

If B.Com was a simple get and was set as the src attribute for an iframe, the jQuery loading method does the trick. But in this case it is not so.

Any help is appreciated :)

+5
source share
2 answers

iframe. iFrame:

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

@charlietfl , . , , .

iframe :)

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

B.com , .

, ?

+11

More articles:


All Articles