自动设置iframe的高度,谷歌,火狐, ie通用

原创于 2012-01-09 12:12:56 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #ie #javascript

本文介绍了一种使用JavaScript动态调整iframe元素高度的方法。通过检测iframe内部body元素的高度信息，并将其应用到iframe自身的高度上，实现了iframe内容变化时的高度自适应。文中提供的代码适用于不同浏览器环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<iframe 
id="contentFrame" 
name="contentFrame" 
src="" 
frameborder="0" 
scrolling="no" 
width="100%" 
height="100%" 
onload="Javascript:SetWinHeight(this)">
</iframe>

function SetWinHeight(obj) 
{
  var doc;
  if(obj.contentDocument)
  {
   doc = obj.contentDocument.body;
  }else if(obj.Document)
  {
   doc = obj.Document.body;
  } 
  /*var s = "";
  for(var p in doc)
  {  
   if(p.indexOf("Height")>0)
   {
    s += p +"=" + doc[p] + "\n";
   }
  }
  alert(s);*/
  var h =  Math.max(doc.scrollHeight,doc.offsetHeight,doc.clientHeight ); 
   obj.style.height =  h+ "px";
}