IFrame自适应大小（全屏已实现）

原创已于 2024-12-19 09:03:13 修改 · 5.7w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #border #scroll #测试 #ie

于 2011-04-18 15:13:00 首次发布

本文介绍了一种在页面中嵌套iframe并实现全屏自适应的方法，包括页面加载时和调整窗口大小时如何动态调整iframe高度，适用于含有多个元素如logo的布局。

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

近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。

在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。

经反复实现，如下代码可实现：

<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>iframe全屏测试</title> 
 </head>
 <body scroll="no">
  <mce:style>
   <!-- body { margin: 0px; } iframe {border: 0px;} -->
  </mce:style>
  <style mce_bogus="1">body { margin: 0px; } iframe {border: 0px;}</style>  
  <mce:script type="text/javascript">
   <!-- function resize(){ document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px"; } window.onresize = resize; // -->
  </mce:script>  
  <img border="0" width="100%" height="84" src="./images/logo.png" mce_src="images/logo.png" /> 
  <iframe id="frame3d" name="frame3d" frameborder="0" width="100%" scrolling="auto" style="margin-top: -4px;" onload="this.style.height=document.body.clientHeight-84" height="100%" src="./map.jsp" mce_src="map.jsp"></iframe>  &nbsp;
 </body>
</html>

1、页面加载实现：iframe的onload事件，之所以减去84，是logo图片的高度，把这个位置给让出来。

2、全屏实现：window.onresize事件

document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px";