我正在加载一个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' );
其他回答
简单的解决方案是测量内容区域的宽度和高度，然后使用这些测量值来计算底部填充百分比。
在本例中，测量值为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容器的位置设置为绝对，iframe将根据其内容自动改变其高度
<style>
.iframe-container {
display: block;
position: absolute;
/*change position as you need*/
bottom: 0;
left: 0;
right: 0;
top: 0;
}
iframe {
margin: 0;
padding: 0;
border: 0;
width: 100%;
background-color: #fff;
}
</style>
<div class="iframe-container">
<iframe src="http://iframesourcepage"></iframe>
</div>
您可以通过使用以下方法检索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();
示例使用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的宽度和高度与它的父div相同?
设置动态高度-
我们需要与跨域iFrames和父通信 然后我们可以将iframe的滚动高度/内容高度发送到父窗口
和代码- https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
