当前位置:首页 > Web开发 > 正文

sHeight) return height } // 根据ID获取iframe对象 var ifr = docume

2024-03-31 Web开发

比来在做网页时需要使iframe高度自适应,以提高用户体验,,网上找了挺多都很庞大,最后找到了这个

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>

【HTML】iframe嵌套界面自适应,可高度自由收缩

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30999.html