码迷,mamicode.com
首页 > Web开发 > 详细

【HTML】iframe嵌套界面自适应,可高度自由收缩

时间:2020-01-26 17:22:57      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:html   ram   doc   适应   min   网上   scrolling   解决   math   

最近在做网页时需要使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>
 

 

【HTML】iframe嵌套界面自适应,可高度自由收缩

标签:html   ram   doc   适应   min   网上   scrolling   解决   math   

原文地址:https://www.cnblogs.com/HGNET/p/12234331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!