iframe嵌套界面自适应,可高度自由收缩
iframe嵌套界面自适应,可高度自由收缩
iframe嵌套界面自适应是一个比较常见的功能需求,但是目前网上搜索出来的均不能做到自适应功能,下面是我列出来的解决方案,分享给大家,使用原生的JS编写,适用于chrome,firefox,IE浏览器,下面是代码部分。
HTML:
<div class="main_page"> <iframe scrolling="no" id="main" name="main" frameborder="0" src="" style="min-height:600px;width:100%;height:100%;"></iframe> </div>
JS:
<script> // 计算页面的实际高度,iframe自适应会用到 function calcPageHeight(doc) { var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) var height = Math.max(cHeight, sHeight) return height } //根据ID获取iframe对象 var ifr = document.getElementById("main") ifr.onload = function() { //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩 ifr.style.height="0px"; var iDoc = ifr.contentDocument || ifr.document var height = calcPageHeight(iDoc) if(height < 850){ height = 850; } ifr.style.height = height + "px" } </script>
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇:没有了
- 下一篇: swagger环境的搭建(swagger-editor|swagger-ui)