JavaScript实现iframe的高度自动适应_javascript iframe宽高自适应-优快云博客

本文链接：https://blog.youkuaiyun.com/webstas/article/details/2053779

本文介绍两种动态调整iframe高度的方法，确保iframe能够自适应其内容高度，避免滚动条出现。第一种方法通过JavaScript实现，适用于Firefox和其他浏览器；第二种方法更为简洁，通过iframe的onload事件直接设置高度。

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

方法一（规范、易于理解，我的两个项目都是使用该方法）：JavaScript部分：

<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0 

function dyniframesize(iframename) {
  var pTar = null;
  if (document.getElementById){
    pTar = document.getElementById(iframename);
  }
  else{
    eval('pTar = ' + iframename + ';');
  }
  if (pTar && !window.opera){
    //begin resizing iframe
    pTar.style.display="block"
    
    if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
      //ns6 syntax
      pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight; 
    }
    else if (pTar.Document && pTar.Document.body.scrollHeight){
      //ie5+ syntax
      pTar.height = pTar.Document.body.scrollHeight;
    }
  }
}
</script>

HTML部分：

<iframe id="myFrameID" 
onload="javascript:{dyniframesize('myFrameID');}" 
marginwidth=0 marginheight=0 frameborder=0 
scrolling=no src="/subPage.htm" 
width=200 height=100><!--此宽度与高度可以随意设定-->
</iframe>

方法二（优快云网友Simonzy总结出来的方法，简单易用）：

<iframe id="iframeName" name="iframeName" runat="server" src="ShowMsg.aspx" width="710" height="100%" scrolling="no"    frameborder="0" align="left" onload="javascript:this.style.height=document.all.iframeName.contentWindow.document.forms(0).offsetHeight;">
</iframe>