我正在加载一个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崩溃了。我真的不明白为什么会发生这种情况。
当前回答
为了增加窗口底部似乎被切断的部分，特别是当你没有滚动时，我使用了:
function resizeIframe(iframe) {
var addHeight = 20; //or whatever size is being cut off
iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
}
其他回答
您可以通过使用以下方法检索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();
我发现接受的答案是不够的，因为X-FRAME-OPTIONS: Allow-From在safari或chrome中不支持。相反，我们采用了不同的方法，这可以从Disqus的Ben Vinegar的演讲中找到。其思想是在父窗口中添加一个事件侦听器，然后在iframe中使用窗口。postMessage发送一个事件给父进程，告诉它做一些事情(调整iframe的大小)。
所以在父文档中，添加一个事件监听器:
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);
在iframe中，写一个函数来发布消息:
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
最后，在iframe中，给body标签添加一个onLoad来触发resize函数:
<body onLoad="resize();">
我发现特洛伊的答案不管用。这是为ajax重新编写的相同代码:
$.ajax({
url: 'data.php',
dataType: 'json',
success: function(data)
{
// Put the data onto the page
// Resize the iframe
var iframe = $(window.top.document).find("#iframe");
iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
}
});
您可以查看四个不同的属性来获取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');
}
你也可以添加一个重复的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)" ...
你的回调应该足够快，对你的整体性能没有太大的影响
