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

Show spinner till iframe loads with a http post response

本文关键字：加载 http post 响应 iframe 直到 显示      更新时间：2023-09-26

我有两个网站 A.com 和 B.com。我必须在 A.com 中嵌入 B.com iframe 中。我无法在 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 中完美加载并响应 post 请求。但 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方法就可以了。但在这种情况下，它没有。

任何帮助都值得赞赏:)

@charlietfl的答案是正确的，而且有效。我只是想分享我发现的另一种方法，这种方法也有效。

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

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

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

知道哪种方法更可取吗？

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

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