将iframe内容高度设置为自动调整大小以实现动态调整

Question

将iframe内容高度设置为自动调整大小以实现动态调整

iframeresizeheight

57

我自己在寻找一个简单的解决方案来改变iframe中内容的高度。

似乎规定不能从包含它的页面获取iframe的高度，这是出于安全考虑。那么我们该怎么做呢？

- Paul

它真的可以跨域工作吗？我没有尝试过，但我认为不应该可以。你无法通过不同的域访问JavaScript。 - Pierre de LESPINAY

如果大小设置错误，您可能需要在iFrame页面末尾添加<div style="clear:both;"> </div>。这是由于float:left;的原因。 - CodingYourLife

2个回答

1

简单解决方案： <iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe> 当 iframe 和父窗口在同一个域时，此方法有效。但当它们在不同的域中时则无效。

- M Fishbein

你太棒了！非常感谢你！ - Erick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul · Accepted Answer

在iframe中： 这意味着您需要在iframe页面中添加一些代码。只需将此脚本添加到iframe内的代码中：

<body onload="parent.alertsize(document.body.scrollHeight);">

在占位页面中：在容纳 iframe 的页面（在我的情况下，ID 为“myiframe”），添加一小段 JavaScript：

<script>
function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height=pixels+"px";
}
</script>

当 iframe 被加载时，它会触发父窗口中的 JavaScript 函数，在这种情况下，父窗口就是包含 iframe 的页面。该函数将接收 iframe 高度的像素值。

然后，父窗口会将此数字加上32以避免出现滚动条，并将 iframe 高度设置为新数字。

就是这样，不需要做其他任何事情。

但如果你想了解更多小技巧，请继续阅读... 在 iframe 中使用自适应高度？ 如果你像我一样喜欢切换内容，iframe 的高度将会随之改变（无需重新加载页面和触发 onload 事件）。我通常会添加一个非常简单的切换脚本，我在网上找到它：

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
}
</script>

在那个脚本中添加以下内容：

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>

如何使用上述脚本很简单：

<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>

对于那些喜欢剪切粘贴并从那里开始的人，这是两个页面的内容。在我的情况下，它们在同一个文件夹中，但跨域也应该可以使用（我认为...）

完整的暂停页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>

<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>

完整的 iframe 代码：（此 iframe 名为 "theiframe.htm"）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight);
}
</script>
</head>

<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END

</body>
</html>

演示