我正在加载 iFrame，并希望父级根据 iFrame 内容的高度自动更改高度。
简单来说，所有页面都属于同一个域，所以我不应该遇到跨站点脚本问题。
【问题讨论】：
标签： javascript iframe autosize
在任何其他元素上，我会使用 DOM 对象的 scrollHeight 并相应地设置高度。我不知道这是否适用于 iframe（因为它们对所有内容都有些古怪），但它当然值得一试。
编辑：环顾四周，普遍的共识是使用 offsetHeight 设置 iframe 内的高度：
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
并附加它以与 iframe-body 的 onLoad 事件一起运行。
【讨论】：
parent.document.getElementById('the-iframe-id').height 应改为 parent.document.getElementById('the-iframe-id').style.height。请注意，height 是 style 属性的属性。
【讨论】：
我刚好遇到你的问题，我有一个解决方案。但它在jquery中。太简单了。
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
你去！
干杯！ :)
编辑：如果您有一个基于 iframe 方法而不是 div 方法的富文本编辑器，并且希望它扩展每个新行，那么这段代码就可以满足需要。
【讨论】：
setInterval 函数的第一个参数。而是使用回调。
这是一个非常简单的解决方案，适用于所有浏览器和跨域：
首先，这适用于以下概念：如果包含 iframe 的 html 页面设置为 100% 的高度，并且使用 css 设置 iframe 的样式以具有 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>
【讨论】：
这个solution 最适合我。它使用 jQuery 和 iframe 的“.load”事件。
【讨论】：
在 IE 5.5+ 中，您可以使用 contentWindow 属性：
iframe.height = iframe.contentWindow.document.scrollHeight;
在 Netscape 6（假设也是 firefox）中，contentDocument 属性：
iframe.height = iframe.contentDocument.scrollHeight
【讨论】：
我发现@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 负载【讨论】：
我的解决方案，（使用 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>
【讨论】：
Oli 有一个适合我的解决方案。作为记录，我的 iFrame 中的页面是由 javascript 呈现的，所以在报告 offsetHeight 之前我需要一个无限小的延迟。它看起来像这样：
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
【讨论】：
这是我使用原型发现的最简单的方法：
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>
这似乎（到目前为止）在所有主要浏览器中都有效。
【讨论】：
我的解决方法是将 iframe 的高度/宽度设置为远远超过 CSS 中任何预期的源页面大小，并将 background 属性设置为 transparent。
在 iframe 中将allow-transparency 设置为true 和scrolling 设置为no。
唯一可见的是您使用的任何源文件。它适用于 IE8、Firefox 3 和 Safari。
【讨论】：
实际上——Patrick 的代码也对我有用。正确的做法是这样的：
注意：前面有一点jquery：
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
【讨论】：
== false？如果没有，您应该在开头添加一个! (if (!$.browser.msie) {)。