5

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

任何帮助表示赞赏:)

4

2 回答 2

11

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

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

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

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

知道首选哪种方法吗？

于 2012-06-25T02:11:20.307 回答
5

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

$ifr.load(function(){
    /* bind new load event listener for next load*/
    $(this).load(function(){
         /* hide spinner*/
    })
});
于 2012-06-25T00:15:19.283 回答