zoukankan      html  css  js  c++  java
  • 【HTML】iframe嵌套界面自适应,可高度自由收缩

    最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个

    HTML:

    <div class="main_page">
         <iframe scrolling="no" id="main" name="main" frameborder="0"  src="" 
            style="min-height:600px;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>
     
  • 相关阅读:
    冲刺第二阶段第五天
    找水王2
    冲刺第二阶段第四天
    梦断代码阅读笔记03
    冲刺第二阶段第三天
    冲刺第二阶段第二天
    冲刺第二阶段第一天
    梦断代码阅读笔记02
    第十二周学习进度条
    找水王
  • 原文地址:https://www.cnblogs.com/HGNET/p/12234331.html
Copyright © 2011-2022 走看看