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

问题描述：

我自己正在寻找一种简单的解决方案来更改iframe中的内容高度。设置iframe内容高度以动态自动调整大小

看起来规则是你无法从持有它的页面获得iframe的高度。这是因为安全显然。我们应该怎么做？

它真的可以跨域吗？我没有尝试，但我认为它不应该。你不能通过不同的域名访问javascript插件。 –

如果大小设置错误，则可能需要在页面末尾的iframe中使用

。由于float：left ;. – CodingYourLife

答

在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代码：（这个名为“theiframe”的iframe。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

这看起来会很好，但请记住，它不会跨域使用。请参阅此示例以获取完整的跨域方法： http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content或者参阅以下更强大的库以获取跨域的帮助： http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/并且这个库使用'mutationObserver'来保持iFrame的大小以改变内容和'postMessage'来处理跨域问题。 https://github.com/davidjbradshaw/iframe-resizer – Lucas

@david bradshaw您的脚本是否可以在不调整服务器设置的情况下跨域进行工作？ – Lucas

是的，它使用iframe和父页面之间的postMessage。 –

答

简单的解决方案：

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

这工作时，iframe和父窗口都在同一个域时，两者在它不工作。不同的域名

你摇滚！非常感谢！ – Erick

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

相关推荐