【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.document
      var height = calcPageHeight(iDoc)
      if(height < 850){
          height = 850;
      }
      ifr.style.height = height + 'px'
  }
</script>
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM