我正在加载一个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和下面的代码为我工作，
var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'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>';
把这个添加到iframe中，这对我来说很管用:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
如果你使用jQuery，试试下面的代码:
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
我使用jQuery和下面的代码为我工作，
var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );
以防这能帮到谁。我拽着我的头发试图让这个工作，然后我注意到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上方和下方的填充，在这种情况下它贯穿整个屏幕。
