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

最新推荐文章于 2024-05-30 16:18:48 发布

whisht

最新推荐文章于 2024-05-30 16:18:48 发布

阅读量5.7w

点赞数 2

本文链接：https://blog.csdn.net/ljz9425/article/details/6331255

版权

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

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

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

<html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>iframe全屏测试</title> <mce:style></mce:style><style mce_bogus="1">body { margin: 0px; } iframe {border: 0px;}</style> </head> <mce:script type="text/javascript"></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";

whisht

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
IFrame自适应大小（全屏已实现）

<br />近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。<br />在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。<br />经反复实现，如下代码可实现：<br /><html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>iframe全屏测试</title>
复制链接

扫一扫