iFrame 自适应高度

iteye_10946

于 2010-07-09 11:11:34 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_10946/article/details/81891251

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使IFrame元素能够自动调整其高度以适应内部文档内容的方法。通过使用JavaScript监听IFrame加载完成事件，并设置IFrame的高度为内部文档的实际高度，可以实现无缝且美观的展示效果。

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

<iframe 
    src="http://www.fufuok.com/" 
    id="iframepage" 
    name="iframeID" 
    frameBorder=0 
    scrolling=no 
    width="100%" 
    onLoad="iFrameHeight()" 
></iframe>

<script type="text/javascript" language="javascript">  
  function iFrameHeight() {   
    var ifm=document.getElementById("iframeID");   
    var subWeb=document.frames?document.frames["iframeID"].document:
               ifm.contentDocument;   
    if(ifm != null && subWeb != null) {
      ifm.height = subWeb.body.scrollHeight;
    }   
  } 
</script>

用最简单的传统处理方式：

<iframe 
      id="frame_content" 
      src="iframe_b.html" 
      scrolling="no" 
      frameborder="0" 
      οnlοad="this.height=this.contentWindow.document.documentElement.scrollHeight"
></iframe>

搞定！