最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,后来在csdn看到的这段代码简介而有效,故此记录下,感谢博主。
<div id="Header">
<iframe scrolling="no" id="main" name="main" frameborder="0" src="admin_top.html" style="min-height:600px;width:100%;height:100%;"></iframe>
</div>
div id="Content-Left">
<iframe id="Iframe5" frameborder="0" runat="server" scrolling="no" src="left.html" 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('Header')
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'
}
//根据ID获取iframe对象
var ifr = document.getElementById('Content-Left')
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>