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*/
    })
});

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

2 个答案: