IFrame自适应大小（已实现全屏）
思韵闪耀
2018-08-16
0次
近日做项目中用到页面中嵌套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;" onload="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";
【版权声明】
本站部分内容来源于互联网，本站不拥有所有权，不承担相关法律责任。如果发现本站有侵权的内容，欢迎发送邮件至masing@13sy.com 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
相关内容
热门资讯
Invalid left-ha...
写一个提交函数的时候，发现函数不生效，F12之后看到Invalid left-hand side i...
响应图片(Responsive...
一、开门见山 响应图片技术可以说是响应布局衍生出来的一个小分支。说白了，就是不同显示器宽度下调用不同...
轻松删除MetInfo CMS...
第一步：首页底部版权，模板文件foot直接删除； 第二部：首页头部generator版权，\publ...
ckplayer6.3如何替换...
1.刚打开播放器，视频在缓冲时播放器中间的LOGO怎么替换？(如下图) 2.视频播放器右上角的CK ...
inDensity，inTar...
如果接触Android中的Bitmap较深的话，肯定会知道标题上的这三个属性值，那么这三个属性值的关...
JS 验证
利用Javascript中每个对象(Object)的prototype属性我们可以为Javascri...
在文本框中输入时保证总是在最...
那就要在keypress时保证文本框的光标在尾部，而文本框value赋值后其光标默认在最后，故可采用...
微信UA
Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5...
检测大写锁定键(Caps Lo...
h1检测大写锁定键/h1form action="#" method="post" p label ...
iframe高度自适应,全屏,...
!注意此方法用于同一个域名下,可能需要部署在服务器上才能看出效果 !DOCTYPE html PUB...