我正在加载一个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的宽度和高度与它的父div相同?
设置动态高度-
我们需要与跨域iFrames和父通信 然后我们可以将iframe的滚动高度/内容高度发送到父窗口
和代码- https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
其他回答
比起使用javscript/jquery，我发现最简单的方法是:
<iframe style=“min-height：98vh” src=“http://yourdomain.com” width=“100%”></iframe>
这里1vh =浏览器窗口高度的1%。所以要设置的高度理论值是100vh，但实际上是98vh。
$(document).height() // - $('body').offset().top
和/或
$(window).height()
参见Stack Overflow问题如何获取body元素的高度。
试着用jQuery找到身体的高度:
if $("body").height()
它没有值，如果Firebug。也许这就是问题所在。
您可以通过使用以下方法检索IFRAME内容的高度: contentWindow.document.body.scrollHeight
加载IFRAME后，您可以通过以下操作更改高度:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
然后，在IFRAME标记上，像这样连接处理程序:
<iframe id="idIframe" onload="iframeLoaded()" ...
我有一个情况在一段时间前，我还需要调用iframeLoaded从IFRAME本身的表单提交后发生。您可以通过在IFRAME的内容脚本中执行以下操作来实现这一点:
parent.iframeLoaded();
以防这能帮到谁。我拽着我的头发试图让这个工作，然后我注意到iframe有一个类入口高度:100%。当我移除这个，一切都按照预期工作。所以，请检查任何css冲突。
对蓝鱼的回答略有改进…
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
这考虑了窗口屏幕(浏览器，手机)的高度，这对响应式设计和具有巨大高度的iframe很好。 填充表示你想要的iframe上方和下方的填充，在这种情况下它贯穿整个屏幕。
