我正在加载一个iframe中的aspx网页。Iframe中的内容的高度可以大于Iframe的高度。iframe不应该有滚动条。
我在iframe里面有一个包装器div标签，基本上是所有的内容。我写了一些jQuery来实现调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
在哪里 TB_window是包含Iframe的div。
Body - iframe中aspx的Body标签。
该脚本附加到iframe内容。我从父页面获得TB_window元素。虽然这在Chrome上工作得很好，但在Firefox中TB_window崩溃了。我真的不明白为什么会发生这种情况。
当前回答
所有其他答案都是正确的，但如果iframe有一些动态内容，如稍后加载的地图，并动态更改iframe滚动高度。我就是这样做到的。
var iFrameID = document.getElementById('idIframe');
intval = setInterval(function(){
if(iFrameID.scrollHeight == iFrameID.contentWindow.document.body.scrollHeight){
clearInterval(intval);
}else{
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
},500)
我只是将代码包装在setInterval内，它匹配iframe滚动高度与iframe内容滚动高度，然后清除间隔。
其他回答
你也可以添加一个重复的requestAnimationFrame到你的resizeIframe(例如来自@BlueFish的答案)，它总是在浏览器绘制布局之前被调用，你可以更新iframe的高度，当它的内容已经改变了它们的高度。例如，输入表单，惰性加载内容等。
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
你的回调应该足够快，对你的整体性能没有太大的影响
你可以参考相关的问题在这里-如何使iframe的宽度和高度与它的父div相同?
设置动态高度-
我们需要与跨域iFrames和父通信 然后我们可以将iframe的滚动高度/内容高度发送到父窗口
和代码- https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
您可以查看四个不同的属性来获取iFrame中内容的高度。
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
不幸的是，他们都可以给出不同的答案，这些是不一致的浏览器。如果将正文边距设置为0，则document.body.offsetHeight将给出最佳答案。要得到正确的值，请尝试这个函数;它来自iFrame -resizer库，该库还负责在内容更改或浏览器调整大小时保持iFrame的正确大小。
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
简单的解决方案是测量内容区域的宽度和高度，然后使用这些测量值来计算底部填充百分比。
在本例中，测量值为1680 x 720 px，因此底部的填充为720 / 1680 = 0.43 * 100，结果为43%。
.canvas-container {
position: relative;
padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
height: 0;
overflow: hidden;
}
.canvas-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
以防这能帮到谁。我拽着我的头发试图让这个工作，然后我注意到iframe有一个类入口高度:100%。当我移除这个，一切都按照预期工作。所以，请检查任何css冲突。
