最近在做網(wǎng)頁(yè)時(shí)需要使iframe高度自適應(yīng),以提高用戶體驗(yàn)折晦,網(wǎng)上找了挺多都很復(fù)雜钥星,后來(lái)在csdn看到的這段代碼簡(jiǎn)介而有效,故此記錄下满着,感謝博主谦炒。
<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>
? // 計(jì)算頁(yè)面的實(shí)際高度贯莺,iframe自適應(yīng)會(huì)用到
? 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
? }
? //根據(jù)ID獲取iframe對(duì)象
? var ifr = document.getElementById('Header')
? ifr.onload = function() {
? ? //解決打開高度太高的頁(yè)面后再打開高度較小頁(yè)面滾動(dòng)條不收縮
? ? ifr.style.height='0px';
? ? ? var iDoc = ifr.contentDocument || ifr.document
? ? ? var height = calcPageHeight(iDoc)
? ? ? if(height < 850){
? ? ? height = 850;
? ? ? }
? ? ? ifr.style.height = height + 'px'
? }
? //根據(jù)ID獲取iframe對(duì)象
? var ifr = document.getElementById('Content-Left')
? ifr.onload = function () {
? ? ? //解決打開高度太高的頁(yè)面后再打開高度較小頁(yè)面滾動(dòng)條不收縮
? ? ? 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>