显示微调器,直到使用http post响应加载iframe

Question

我有两个网站A.com和B.com.我必须在A.com的iframe中嵌入B.com.我不能在B.com做任何改变

B.com仅适用于包含一些帖子数据的帖子请求.我有这个工作如下

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

现在,B.com在iframe中完美加载并响应发布请求.但是B.com很慢.我想在#frameDiv中显示一个微调器,直到iframe加载.我怎样才能做到这一点？

这是我试过的:

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

如果B.Com是一个简单的get并被设置为iframe的src属性,那么jQuery load方法可以解决问题.但在这种情况下它没有.

任何帮助表示赞赏:)

Answer 1

@ charlietfl的答案是正确的,它的确有效.我只是想分享我发现的其他方法也有效.

只需将iframe的背景设置为微调器:)

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

加载B.com时,新文档会隐藏微调器.

知道哪种方法更受欢迎？

Answer 2

您可以尝试在iframe的初始加载事件处理程序中绑定新的加载事件侦听器.以下适用于同一域iFrame:

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