美文网首页
iframe嵌套界面自适应,可高度自由收缩

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

作者: foreversunda | 来源:发表于2019-03-25 22:23 被阅读0次

最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,后来在csdn看到的这段代码简介而有效,故此记录下,感谢博主。

<div id="Header">

        <iframe scrolling="no" id="main" name="main" frameborder="0"  src="admin_top.html"        style="min-height:600px;width:100%;height:100%;"></iframe>     

 </div>

div id="Content-Left">

                <iframe id="Iframe5"  frameborder="0"  runat="server" scrolling="no" src="left.html"  style="min-height:600px;width:100%;height:100%;"> </iframe>

            </div>

<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('Header')

  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'

  }

  //根据ID获取iframe对象

  var ifr = document.getElementById('Content-Left')

  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>

相关文章

网友评论

      本文标题:iframe嵌套界面自适应,可高度自由收缩

      本文链接:https://www.haomeiwen.com/subject/hnuivqtx.html