如何自動調整iFrame的大小？

可能重複：
Resizing an iframe based on content 如何自動調整iFrame的大小？

我加載一個iframe，希望家長能夠自動改變基於IFrame的內容的高度高度。

簡而言之，所有頁面都屬於同一個域，所以我不應該遇到跨站點腳本問題。

2008-10-29 Allan

這裏是最好的解決方案 - http://stackoverflow.com/questions/5867985/iframe-100-height – 2013-06-27 12:24:06

更新的答案，這給出了一系列選項 - http：// stackoverflow。com/questions/14334154/iframe-auto-adjust-height-as-content-changes – 2014-06-09 23:19:39

在任何其他元素上，我會使用DOM對象的scrollHeight並相應地設置高度。我不知道這是否可以在iframe上工作（因爲他們對所有事情都有點詭異），但這當然值得一試。

編輯：有過環顧四周，在全民的共識，從iframe中使用offsetHeight設置高度：

function setHeight() { 
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px'; 
}

，並附上與iframe的身體onLoad事件上運行。

來源

2008-10-29 15:06:31 Oli

這不適合我。要明確，應該在IFRAME HTML中定義setHeight（）嗎？但是-iframe-id是在主頁html中定義的iframe的id？ – AP257 2010-10-01 19:50:25

是的，在IE中也不能很好地工作......它只是在瀏覽器高度上變大。 – Entity 2011-06-23 00:17:35

添加+ - 60像素的偏移量確保滾動條不可見（不同的瀏覽器）並不是一個壞主意。 – thomasvdb 2011-09-26 08:40:42

奧利有一個解決方案，將爲我工作。爲了記錄，我的iFrame中的頁面由javascript呈現，所以在報告offsetHeight之前我需要無限小的延遲。它看起來像這些方針的東西：


    $(document).ready(function(){ 
     setTimeout(setHeight); 
    }); 

    function setHeight() { 
     alert(document['body'].offsetHeight); 
    }

來源

2008-10-29 15:21:51 Allan

在IE 5.5+，你可以使用contentWindow屬性：

iframe.height = iframe.contentWindow.document.scrollHeight;

在Netscape 6（假設火狐也一樣），contentDocument屬性：

iframe.height = iframe.contentDocument.scrollHeight

來源

2008-10-29 15:24:57

實際上 - 帕特里克的代碼也適用於我。正確的方式做這將是沿着這一行：

注：有一點的jQuery的未來：


if ($.browser.msie == false) { 
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight); 
} else { 
    var h = (document.getElementById("iframeID").Document.body.scrollHeight); 
}

來源

2008-10-29 18:12:21 Allan

這solution工作最適合我。它使用jQuery和iframe的「.load」事件。

來源

2009-03-26 18:45:07 craigmoliver

我只是碰巧遇到你的問題，我有一個解決方案。但它在jQuery中。它太簡單了。

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"}); 
setInterval("$('iframe').height($('iframe').contents().find('body').height() + 20)", 1);

你走了！

乾杯！ :)

編輯：如果你有一個基於iframe方法而不是div方法的富文本編輯器，並且希望它擴展每一個新行，那麼這段代碼將做必要的事情。

來源

2010-06-03 15:28:28

這裏是一條走不通的簡單的解決方案，在每一個瀏覽器和交叉領域的工作：

首先，這個工程上，如果包含iframe的html頁面設置爲100％和IFRAME的高度概念使用css來設置樣式的高度爲100％，然後css會自動調整所有尺寸以適合其大小。

下面是代碼：

<head> 
<style type="text/css"> 
html {height:100%} 
body { 
margin:0; 
height:100%; 
overflow:hidden 
} 
</style> 
</head> 

<body> 
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe> 
</body>

來源

2010-08-11 01:39:12 Sky

我的解決方法是設置iframe的高度/寬度以及任何預期的源頁面尺寸過大的CSS &的background屬性transparent。

在iframe集allow-transparency到true和scrolling到no中。

唯一可見的將是您使用的任何源文件。它適用於IE8，Firefox 3，& Safari。

來源

2010-11-06 04:33:57 Gale

這是我使用的原型發現最簡單的方法：

main.html中：

<html> 
<head> 


<script src="prototype.js"></script> 

<script> 
    function init() { 
     var iframe = $(document.getElementById("iframe")); 
     var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content")); 
     var cy = iframe_content.getDimensions().height; 
     iframe.style.height = cy + "px"; 
    } 
</script> 

</head> 

<body onload="init()"> 


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe> 

<br> 
this is the next line 

</body> 
</html>

content.html：

<html> 
<head> 
<script src="prototype.js"></script> 


<style> 
body { 
    margin: 0px; 
    padding: 0px; 
} 
</style> 


</head> 

<body> 


<div id="iframe_content" style="max-height:200px;"> 
Sub content<br> 
Sub content<br> 
... 
... 
... 
</div> 


</body> 
</html>

這似乎是工作（到目前爲止）在所有主流瀏覽器。

來源

2011-06-17 09:05:50

我發現解決方案通過@ShripadK最有幫助，但它沒有工作，如果有多個iframe的話。我的解決方法是：

function autoResizeIFrame() { 
    $('iframe').height(
    function() { 
     return $(this).contents().find('body').height() + 20; 
    } 
) 
} 

$('iframe').contents().find('body').css(
    {"min-height": "100", "overflow" : "hidden"}); 

setTimeout(autoResizeIFrame, 2000); 
setTimeout(autoResizeIFrame, 10000);

$('iframe').height($('iframe').contents().find('body').height() + 20)將設置每幀相同的值，第一幀的內容，即高度的高度。因此，我正在使用jquery的height()而不是一個值。這樣個人高度計算
+ 20是解決iframe滾動條問題的黑客。該數字必須大於滾動條的大小。黑客可能可以避免，但禁用iframe的滾動條。
我用setTimeout而不是setInterval(..., 1)減少我的情況下CPU負荷

來源

2011-09-10 14:31:01 geekQ

嘗試：

來源

2011-09-13 12:47:34 xmedeko

我的解決方案，（使用jQuery）：

<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" > 
</iframe> 
<script type="text/javascript"> 
    $(function() { 

     $('.tabFrame').load(function() { 
      var iframeContentWindow = this.contentWindow; 
      var height = iframeContentWindow.$(document).height(); 
      this.style.height = height + 'px'; 
     }); 
    }); 
</script>

來源

2011-10-25 12:42:54 iknowitwasyoufredo

如何自動調整iFrame的大小？

回答

相關問題