iframe中的自動高度內容（CORS？）

我正在與客戶端合作。他們的網頁正在使用此DOCTYPEiframe中的自動高度內容（CORS？）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我需要將內容傳送到其網站上的頁面。我的內容是這樣的

<div style="height:1000px"> 
    <iframe frameborder="0" src="..." width="550" height="220"></iframe> 
    <br/> 
    <br/> 
    <iframe frameborder="0" src="..." width="550" height="220"></iframe> 
    </div>

我可以給他們夫婦的CSS線的放置在客戶端頁面上的內容，並且，目前，和iframe：

<style> 
.iframecontent 
{ 
    background-color:blue; 
    position: relative; 
height: 100%; 
width: 100% 
} 
</style> 

<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>

由於的高度內容是動態的，我無法爲客戶提供特定的高度 - 相反，我需要它來伸展。

我讀過很多文章，但我仍然不確定最好的方式來做到這一點。可能是CORS？還有別的嗎？

下面是提供的一個解決方案：http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - 它在同一個域上工作，但對於跨域的交談，它依賴於PostMessage這是一個HTML 5的東西。

我試過http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/，但一直沒有能夠得到它的工作。

我可能會讓客戶端將幀設置爲1500px，以便它適合我選擇的任何內容並完成它，但有沒有更好的方法？

來源

2012-11-08 user1194034

您可以設置html,body{height:100%;}，然後是您的iframe{height:100%}？

百分比高度直接取決於其父級高度（塊元素）。即：iframe是100％的什麼？在這種情況下，它的父母是身體。

來源

2012-11-08 20:42:02

您可以使用postMessage的插件http://benalman.com/projects/jquery-postmessage-plugin/

它可以讓您從一個iframe父元素裏面發帖。結合使用setInterval JavaScript函數，您可以將當前所需的大小發送到父元素。

的iframe

var currentIframeSize = 0; 
window.setInterval(function() { 
    var size = $('body').outerHeight(true); 
    //just post, if the size has changed 
    if (currentIframeSize != size){ 
     currentIframeSize = size; 
     $.postMessage({if_height : size}, source_url, parent); 
    } 
}, 1000); //do that every second

基於這兩個片段父元素

id = "theIdOfYourIframe"; 
$.receiveMessage(function(e){ 
    var rec_height = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1')); 
    if (!isNaN(rec_height) && rec_height > 0 && rec_height !== current_height) { 
     current_height = rec_height; 
     $('#' + id).height(rec_height); 
    } 
});

的頭段內，你應該把你的問題就解決了

來源

2012-11-18 13:16:02 MatthiasLaug

我更新我嘗試過的插件（http://sly777.github.com/Iframe-Height-Jquery-Plugin/），並添加了tutoria l如何使用這個插件進行跨域修復。我希望它有幫助。

來源

2013-02-20 22:18:12

iframe中的自動高度內容（CORS？）

回答

相關問題