近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。
在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。
经反复实现，如下代码可实现：
<html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>iframe全屏测试</title> <mce:style><!-- body { margin: 0px; } iframe {border: 0px;} --></mce:style><style mce_bogus="1">body { margin: 0px; } iframe {border: 0px;}</style> </head> <mce:script type="text/javascript"><!-- function resize(){ document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px"; } window.onresize = resize; // --></mce:script> <body scroll="no"> <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;" οnlοad="this.style.height=document.body.clientHeight-84" height="100%" src="./map.jsp" mce_src="map.jsp"></iframe> </body> </html>
1、页面加载实现：iframe的onload事件，之所以减去84，是logo图片的高度，把这个位置给让出来。
2、全屏实现：window.onresize事件
document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px";
