关于html中iframe自动调节高度

最新推荐文章于 2021-06-02 17:59:58 发布

原创最新推荐文章于 2021-06-02 17:59:58 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #html #前端 #iframe动态修改高度

学习记录专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在父页面中实现iframe自适应高度的方法，通过监听iframe加载完成事件并使用JavaScript动态调整其高度，避免了在每个子页面重复编写代码。

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

最近在写一个前端页面。遇到了一个问题就是iframe中的页面高度是不固定的问题。

想让iframe随着页面的高度来修改。

以前也弄过一次，但是以前弄的是在子页面去修改父页面的高度。

每个页面都要写一个修改的方法，感觉很是麻烦。

然后经过一番查找。发现在父页面进行修改更加方便。

最明显之处就是在父页面写一个修改方法后，无论你有多少个子页面，都只需要写一次修改方法。

首先在父页面创建iframe：

<iframe name="indexFrame" id="indexFrame" src="welcome.html" scrolling="no" frameborder="0" style="width:100%;" onload="loadIframe()" ></iframe>

注意上面加红的部分。onload方法是用来监听每次iframe修改页面后的事件。

然后用js写一个loadIframe()方法。

function loadIframe(){
   var ifm= document.getElementById("indexFrame"); 
   var subWeb = document.frames?document.frames["indexFrame"].document:ifm.contentDocument;     
   if(ifm!= null && subWeb != null) {  
      ifm.height = subWeb.body.scrollHeight;  
      if(ifm.height<545){  
         ifm.height=545;  
      }  
   }  
}

每次iframe中的页面修改后，都会执行这个方法。

然后就可以根据每次加载页面的高度来设置iframe的高度了。

我的个人博客：点击进入我的个人博客