显示微调，直到iframe加载一个http post响应

我有两个网站A.com和B.com。我必须将B.com嵌入到A.com的iframe中。我无法在B.com上进行任何更改显示微调，直到iframe加载一个http post响应

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方法的伎俩。但在这种情况下，它不是。

任何帮助表示赞赏:)

来源

2012-06-24 labroo

您可以尝试的iframe的初始加载事件处理程序中结合新的负载事件侦听器。以下作品在相同的域名框架：

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

来源

2012-06-25 00:15:19 charlietfl

谢谢@charlie，这个工程。我找到了另一种方式，并将其作为下面的另一个答案发布。请让我知道您对该方法的看法 – labroo

是否对提交进行了这项工作？从来没有尝试过跨域 – charlietfl

是的，它的工作原理，跨域也:) – labroo

@ charlietfl的答案是正确的，它的工作原理。我只是想分享我发现的其他方法，也可以。

刚刚成立的iframe的背景，以微调:)

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

当B.com负载，新的文件隐藏微调..

任何想法，这是更可取？

来源

2012-06-25 02:11:20 labroo

我猜，因为没有CSS设置在动态iframe的身体它是透明的...非常有趣的解决方案！ – charlietfl

如果您正在加载的iframe具有透明背景，这不起作用，对吧？ –

显示微调，直到iframe加载一个http post响应

回答

相关问题