• 【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>
     
  • 相关阅读:
    Python_数据类型与变量
    啦啦啦
    Java开发环境搭建
    TCP/IP 学习 --- 4(linux网络基础api)
    TCP/IP 学习 --- 3 (流量控制和拥塞控制)
    TCP/IP 学习 --- 2
    TCP/IP 学习记录 -- 1
    多线程
    如何解析xml文件
    Redis
  • 原文地址:https://www.cnblogs.com/HGNET/p/12234331.html
Copyright © 2020-2023  润新知