我正在加载一个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崩溃了。我真的不明白为什么会发生这种情况。
当前回答
当您需要一个不使用jquery的解决方案时，这个选项非常有用。在这种情况下，您应该尝试添加一个容器，并以百分比为其设置填充
HTML示例代码:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
CSS示例代码:
.iframeclass{
position: absolute;
top: 0;
width: 100%;
}
.iframecontainer{
position: relative;
width: 100%;
height: auto;
padding-top: 61%;
}
其他回答
您可以通过使用以下方法检索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();
$(document).height() // - $('body').offset().top
和/或
$(window).height()
参见Stack Overflow问题如何获取body元素的高度。
试着用jQuery找到身体的高度:
if $("body").height()
它没有值，如果Firebug。也许这就是问题所在。
所有其他答案都是正确的，但如果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内容滚动高度，然后清除间隔。
其他答案不适合我，所以我做了一些改变。希望这能有所帮助
$('#iframe').on("load", function() {
var iframe = $(window.top.document).find("#iframe");
iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
示例使用PHP htmlspecialchars() +检查高度是否存在，并为> 0:
$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
