将 iframe 内容高度设置为动态自动调整大小
Posted
技术标签:
【中文标题】将 iframe 内容高度设置为动态自动调整大小【英文标题】：Set iframe content height to auto resize dynamically 【发布时间】：2011-10-24 20:55:35 【问题描述】：我自己正在寻找一种简单的解决方案来更改包含内容的 iframe 的高度。
似乎规则是您无法从包含 iframe 的页面获取 iframe 的高度。这显然是出于安全考虑。我们该怎么做？
【问题讨论】：
真的可以跨域工作吗？我没有尝试，但我认为不应该。您不能通过不同的域访问 javascript。 如果尺寸设置错误，您可能需要在 iFrame 中的页面末尾添加 。因为 float:left;. 【参考方案1】：简单的解决方案：
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
当 iframe 和父窗口在同一个域中时，此方法有效。当两者在不同的域时，它不起作用。
【讨论】：
你摇滚！非常感谢！【参考方案2】：在 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 的页面。
向该 JavaScript 函数发送其（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>
Demo
【讨论】：
这看起来很好用，但请记住，它不能跨域工作。请参阅此示例以获取彻底的跨域方法：***.com/questions/153152/… 或查看此更强大的库以帮助进行跨域：easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content 以及使用mutationObserver 来保持 iFrame 大小以适应不断变化的内容和 @ 987654333@处理跨域问题。 github.com/davidjbradshaw/iframe-resizer
@david bradshaw 您的脚本是否可以在不调整服务器设置的情况下跨域工作？
是的，它在 iframe 和父页面之间使用 postMessage。以上是关于将 iframe 内容高度设置为动态自动调整大小的主要内容，如果未能解决你的问题，请参考以下文章