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

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

iframe

将iframe内容高度设置为动态自动调整大小,iframe,resize,height,Iframe,Resize,Height,我自己正在寻找一个简单的解决方案来改变iframe中包含内容的高度似乎规则是，您无法从保存iframe的页面获取iframe的高度。这显然是出于安全考虑。我们如何才能做到这一点？在iframe: 这意味着您必须在iframe页面中添加一些代码。只需将此脚本添加到IFRAME中的代码中： <body onload="parent.alertsize(document.body.scrollHeight);"> 在等待页面中：在保存iframe的页面中（在我使用ID=“myi

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

似乎规则是，您无法从保存iframe的页面获取iframe的高度。这显然是出于安全考虑。我们如何才能做到这一点？

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


函数大小（像素）{
像素+=32；
document.getElementById（'myiframe'）.style.height=pixels+“px”；
}

现在发生的是，当加载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>


功能切换（obj）{
var el=document.getElementById（obj）；
如果（el.style.display！='block'）el.style.display='block'；
else el.style.display='none'；
}

在该脚本中，只需添加：

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


功能切换（obj）{
var el=document.getElementById（obj）；
如果（el.style.display！='block'）el.style.display='block'；
else el.style.display='none'；
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>



再高一点

再高一点

再高一点

对于那些喜欢剪切粘贴的人，这里有两页。在我的情况下，我有他们在同一个文件夹，但它应该跨域工作（我想…）

完整的等待页面代码：

<!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支架
函数大小（像素）{
像素+=32；
document.getElementById（'myiframe'）.style.height=pixels+“px”；
}

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


IFRAME内容
功能切换（obj）{
var el=document.getElementById（obj）；
如果（el.style.display！='block'）el.style.display='block'；
else el.style.display='none'；
parent.alertsize（document.body.scrollHeight）；
}


再高一点

再高一点

再高一点

文本

文本

文本

文本

文本

文本

文本

文本

结局

简单解决方案：

当iframe和父窗口在同一个域中时，这一点就起作用了。当两者位于不同的域时，它不起作用。

它真的跨域工作吗？我没有试过，但我认为不应该。您无法通过不同的域访问javascript。如果大小设置错误，您可能需要在iFrame中的页面末尾添加一个。因为float:left；。这看起来将非常有效，但请记住，它不会跨域工作。请参阅此示例以了解彻底的跨域方法：或参阅此更强大的库以获得跨域帮助：以及此库，它使用

mutationObserver

保持iFrame的大小以适应不断变化的内容，并使用

postMessage

处理跨域问题@david bradshaw您的脚本是否在不调整服务器设置的情况下跨域工作？是的，它在iframe和父页面之间使用postMessage。您太棒了！非常感谢你！

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