【HTML】iframe嵌套界面自适应，可高度自由收缩
2021-04-24 17:26
标签：html ram doc 适应 min 网上 scrolling 解决 math 最近在做网页时需要使iframe高度自适应，以提高用户体验，网上找了挺多都很复杂，最后找到了这个 JS： 【HTML】iframe嵌套界面自适应，可高度自由收缩 标签：html ram doc 适应 min 网上 scrolling 解决 math 原文地址：https://www.cnblogs.com/HGNET/p/12234331.htmlHTML:
div class="main_page">
iframe scrolling="no" id="main" name="main" frameborder="0" src=""
style="min-height:600px;width:100%;height:100%;">iframe>
div>
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嵌套界面自适应，可高度自由收缩
文章链接：http://soscw.com/index.php/essay/79032.html