Question

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

似乎规则是你不能从持有它的页面获得iframe的高度。这是因为安全性显而易见。我们怎么做到这一点？

Answer 1

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

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

在保留页面中 在包含iframe的页面中（在我的情况下使用ID =＆＃34; myiframe＆＃34;）添加一个小的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名为＆＃34; theiframe.htm＆＃34;）

<!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

Answer 2

简单的解决方案：

<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>

当iframe和父窗口位于同一个域中时，此方法有效。当两者处于不同的域时，它不起作用。

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

2 个答案: