iframe的内容增高或缩减时设置其iframe的高度的处理方案

简介: 原文:iframe的内容增高或缩减时设置其iframe的高度的处理方案  WEB管理软件往往是如下结构的      用户点击子页tab切换中部的显示内容,在切换过程中需要保证前面的子页保持先前的状态。
原文: iframe的内容增高或缩减时设置其iframe的高度的处理方案

  WEB管理软件往往是如下结构的

  

  用户点击子页tab切换中部的显示内容,在切换过程中需要保证前面的子页保持先前的状态。这种情况一般都使用iframe来来作为切换的子页显示内容。

  但是这里有一个问题,iframe不能做高度(height)的自适应。理想状态是当iframe高度超过中部内容显示区的高度的时候iframe自动增高,这样主页面会出现滚动条来做适应。处理方式即不断计算iframe内部元素高度设置iframe

  所以计算iframe里面的内容的高度便是关键(兼容IE8+)。

  首先不能使用文档document的高度,因为document的高度可能不是iframe里面的内容的真实高度(当body的高度小于iframe的window高度的时候,document的高度实际上是window的高度。)。而且一旦使用document的高度来设置iframe的高度,那么document的高度只会增加不会减少(当设置了iframe的高度后,那么无论iframe里面的内容如何变动,iframe的document的高度就会至少是iframe的高度),那么将导致iframe越来越高。所以这里使用body的高度(参考关于浏览器window、document、html、body高度的探究)来计算iframe内容的高度。

  其次,使用body的高度后,那些脱离文档流的元素则需要手动计算其撑开iframe的高度。计算方法是

  脱离文档流元素撑开iframe的高度 = 脱离文档流元素的高度 + 脱离文档流元素离文档顶部的高度 + 离窗口底部的余留空间

  然后计算每个脱离文档流元素撑开的高度取其中最大的值再和body比较,取出最大的最终iframe内容高度值。

  实现代码如下(iframe中引用)

//供主页面调用
//设置iframe高度 
function setActiveIframeHeight(){ 
    //计算iframe内容的高度
  function getBodyHeight(){ 
    var height = 0; 
    if (document) { 
      height = $(document.body).height();//Math.max(document.body.clientHeight,document.body.offsetHeight); 
      //获取iframe中显示的脱离文档流的元素
      var panels = $('.page-shadow.active'),
      pHeight = 0; 
      //计算其中最大的值
      for(var i = 0; i < panels.length; i++){
        //计算撑开iframe的高度
        var panelContent = $(panels[i]), 
        panelContentHeight = panelContent.height() + panelContent.offset().top + 50; 
        pHeight = (panelContentHeight > pHeight)?panelContentHeight:pHeight; 
      } 
      height = (pHeight > height)?pHeight:height; 
    } 
    return height; 
  } 
  var curHeight = getBodyHeight(),
  //这里使用#right-content-test自适应来探测中部内容显示区域的最小高度
  minHeight = top.$('#right-content-test').height(),
    //获取iframe元素     
  htmlDom = top.$('.tab-content>.active').find('iframe')[0]; 

  curHeight = (minHeight >= curHeight) ? minHeight : curHeight; 
   
   //top.activeIframeHeight记录了当前的iframe的的高度     
  if(htmlDom && htmlDom.height != top.activeIframeHeight){ 
    htmlDom.height = top.activeIframeHeight; 
  } 
        
  //防止临界值导致滚动条时有时无使用Math.abs处理 
  if(setActiveIframeHeight.isFirst || (Math.abs(top.activeIframeHeight - curHeight) > 2)){ 
    top.activeIframeHeight = curHeight; 
    htmlDom && (htmlDom.height = top.activeIframeHeight); 
  } 
  setActiveIframeHeight.isFirst = 0; 
}
setActiveIframeHeight.isFirst  = 1;

  间隔一段时间调用setActiveIframeHeight即可。

  

  如果觉得本文不错,请点击右下方【推荐】!

目录
相关文章
|
2月前
|
缓存 前端开发 JavaScript
|
移动开发 JavaScript 前端开发
如何处理 h5 使用 iframe 嵌套页面,内外 viewport 不一致导致的缩放问题?
如何处理 h5 使用 iframe 嵌套页面,内外 viewport 不一致导致的缩放问题?
1247 0
|
5月前
|
JavaScript 前端开发
jQuery滑块拖动控制数字的增加和减少
jQuery滑块拖动控制数字的增加和减少
19 0
|
9月前
|
存储 缓存 JavaScript
如何优化 JavaScript 性能:减少重绘与回流
优化 JavaScript 性能是前端开发中非常重要的课题。在本篇博客文章中,我将重点介绍如何减少重绘(Repaint)与回流(Reflow),以提高 JavaScript 在浏览器中的执行效率。我们将深入探讨导致重绘和回流的原因,并提供一些优化技巧和代码示例来改进性能。
172 0
CSS-动态计算高度
Viewport viewport:可视窗口,也就是浏览器。 vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1%
|
10月前
|
前端开发
CSS流动布局-页面自适应
CSS流动布局-页面自适应
90 0
|
Web App开发 前端开发 JavaScript
影响回流、重绘的 CSS 属性有哪些?
影响回流、重绘的 CSS 属性有哪些?
254 0
影响回流、重绘的 CSS 属性有哪些?
JqGrid实现超长水平(左右)滚动条功能
JqGrid实现超长水平(左右)滚动条功能
495 0
|
Web App开发 编解码 前端开发
适用于移动设备弹性布局的js脚本(rem单位)
背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了。
17456 0
写静态页面如何量高度
行高的计算公式 line-height行高的计算方式是: 行高 = line-height - font-size; 半行高 = 行高/2 下面的图片中,我们应该如何量取高度呢 如果我们设置text2的margin-top为43,苹果按钮的margin-top为53那就大错特错了可以看得出...
1160 0