iframe 自适应高度

最新推荐文章于 2017-02-04 23:16:00 发布

原创最新推荐文章于 2017-02-04 23:16:00 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现iframe自适应高度的方法。通过监听iframe内部文档的高度变化，并相应地调整iframe的高度，使得iframe能够自动扩展以填充其内容。文中提供了一个具体的实现示例。

iframe 的自适应高度：

javaScript函数：

<script type="text/javascript"> 



function reinitIframe(){
var iframe  = document.getElementById("frame_content");
  try{
    
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
 
	var height = Math.max(bHeight, dHeight);
 
	iframe.height =  height;
 
  }catch (ex){
  }
  
}
window.setInterval("reinitIframe()", 200);

Html 代码：

<IFRAME id="frame_content" name="search_user"  onload="this.height=100" style="WIDTH: 100%;" marginWidth=1 marginHeight=1
src="/energy_portal/portal2User.do?actionType=userlistGroup"  frameBorder=0 scrolling=no>
</IFRAME>