IFrame自适应大小(已实现全屏)

2018-08-16 20:01 来源:未知 作者:mas 责编:mas
近日做项目中用到页面中嵌套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"; 

【版权声明】本站部分内容来源于互联网,本站不拥有所有权,如果发现本站有侵权的内容,欢迎发送邮件至 benumon@163.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

分享:

更多文章

相关文章

关键词:

一生受益-思韵闪耀-专业IT技术社区 - 爱编程,爱源码,爱技术,一生受益。

powerby 一生受益-思韵闪耀    豫ICP备13002912号-2