如何使 iframe 调整内容的高度答案

【问题标题】：how to make an iframe adjust height to the content如何使 iframe 调整内容的高度
【发布时间】：2012-11-19 00:01:03
【问题描述】：

我正在构建一个网页，我需要在其中制作不同的部分，并且我希望页面将高度调整为在某个时刻正在查看的部分。实现这一目标的最佳方法是什么？我试图用 iframe 和目标打开来做到这一点

    <a href="/example" target="myframe">

但我无法让 iframe 适应显示的内容。

任何帮助将不胜感激！提前致谢

我想要的是每当有人点击“更多信息”时从页面底部展开的窗口。我以为我可以用 iframe 实现它

【问题讨论】：

我编辑了我的目的......所以也许有人可以提出一个更好的主意

标签： html iframe web height

【解决方案1】：

这适用于所有浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
 F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and    Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>

支持 iframe 的浏览器是需要查看本网站。

【讨论】：

它不起作用.. 我应该在 iframe 正文标签中添加一些内容吗？
这是我的 iframe 标签：
添加您的内容页面..也
添加我的内容页面是什么意思？？
请帮忙！！我编辑了我的目的，所以也许你可以帮助我提出其他建议。也许是一个链接？

【解决方案2】：

我找到了这个解决方案，它完美地解决了我的问题！它甚至可以选择调整宽度。

<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
 ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }

 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;

  /* For width resize, enable below.  */

  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

</script>

<iframe id = "myIframe"  onload = "setIframeHeight( this.id )">

我在这里找到它：http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height

【讨论】：