最近在做網頁時需要使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>