如何自动调整iFrame的大小？
可能重复：
根据内容调整iframe的大小
我正在加载一个iFrame，并希望父级根据iFrame内容的高度自动更改高度。
简而言之，所有页面都属于同一个域，所以我不应该碰到跨站脚本问题。
在任何其他元素上，我将使用DOM对象的scrollHeight并相应地设置高度。 我不知道这是否可以在iframe上工作（因为他们对所有的事情都有些奇怪），但是肯定值得一试。
编辑：经过四处看看，stream行的共识是使用offsetHeight从iframe中设置高度：
function setHeight() { parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px'; }
并附上与iframe-body的onLoad事件一起运行。
尝试：
- jQuery的iframe的自动高度
- iframe的大小调整
我碰巧遇到你的问题，我有一个解决scheme。 但它在jQuery中。 它太简单了。
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"}); setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
你走了！
干杯! 🙂
编辑：如果你有一个基于iframe方法的富文本编辑器，而不是div方法，并希望它扩大每一个新的行，那么这段代码将做必要的。
这是一个简单的解决scheme，适用于所有浏览器和跨域：
首先，这个概念的工作原理是，如果包含iframe的html页面被设置为100％的高度，iframe的样式使用css的高度为100％，那么css会自动resize以适应所有的事情。
这里是代码：
<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>
这个解决scheme最适合我。 它使用jQuery和iframe的“.load”事件。
在IE 5.5+中，你可以使用contentWindow属性：
iframe.height = iframe.contentWindow.document.scrollHeight;
在Netscape 6中（假设使用firefox），contentDocument属性：
iframe.height = iframe.contentDocument.scrollHeight
我发现@ShripadK的解决scheme最有帮助，但如果存在多个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)来减lessCPU负载
奥利有一个解决scheme，将为我工作。 为了logging，我的iFrame中的页面是由javascript呈现的，所以在报告offsetHeight之前我需要一个无限小的延迟。 它看起来像这样：
$(document).ready(function(){ setTimeout(setHeight); }); function setHeight() { alert(document['body'].offsetHeight); }
实际上 – 帕特里克的代码也适用于我。 正确的做法应该是这样的：
注意：前面有一些jquery：
if ($.browser.msie == false) { var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight); } else { var h = (document.getElementById("iframeID").Document.body.scrollHeight); }
这是我使用原型最简单的方法：
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>
这似乎在所有主stream浏览器中都有效。
我的解决方法是将iframe的高度/宽度设置为在CSS和background属性中的任何预期的源页面大小。
在iframe中设置allow-transparency为true并scrolling到no 。
唯一可见的将是您使用的任何源文件。 它适用于IE8，Firefox 3和Safari。
我的解决scheme，（使用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>
