300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 【HTML】iframe嵌套界面自适应 可高度自由收缩

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

时间:2023-12-21 16:30:02

相关推荐

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

最近在做网页时需要使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.documentvar height = calcPageHeight(iDoc)if(height < 850){height = 850;}ifr.style.height = height + 'px'}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。