iFrame 自适应高度

最新推荐文章于 2024-03-29 11:18:46 发布

原创最新推荐文章于 2024-03-29 11:18:46 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

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

<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" 
      onload="this.height=this.contentWindow.document.documentElement.scrollHeight"
></iframe>

搞定！