入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

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

创建时间:2017-04-01 投稿人: 浏览次数:2539

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


          iframe嵌套界面自适应是一个比较常见的功能需求,但是目前网上搜索出来的均不能做到自适应功能,下面是我列出来的解决方案,分享给大家,使用原生的JS编写,适用于chrome,firefox,IE浏览器,下面是代码部分。


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>



如有需要使用到的同学,可以将此段代码copy过去,更换iframe对象id即可使用


声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。