顯示微調，直到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響應

回答

相關問題