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即可。

  

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

目录
相关文章
|
5天前
|
人工智能 JSON 安全
|
5天前
|
云安全 人工智能 安全
|
5天前
|
人工智能 自然语言处理 数据挖掘
Qwen3.8-Max-Preview深度全解析:2.4万亿参数旗舰MoE模型+Token Plan限时优惠完整落地指南
2026年7月,全新旗舰级混合专家大模型Qwen3.8-Max-Preview正式开放抢先体验,作为通义千问Qwen3系列规格最高、综合推理能力顶尖的新一代模型,该模型总参数量达到2.4万亿(2.4T),是当前线上可调用的原生多模态旗舰模型,综合推理水准对标海外顶级Fable 5模型,在复杂工程开发、长文档深度分析、多步骤智能体自治、跨境多语言创作、海量数据挖掘五大高难度业务场景实现跨越式性能提升。
793 1
|
5天前
|
人工智能 自然语言处理 数据挖掘
最新版通义千问(Qwen3.8-Max-Preview)功能介绍
2026年,通义千问正式推出全新旗舰级大模型 **Qwen3.8-Max-Preview 预览版**,作为首款突破万亿参数规格的新一代基座模型,该模型总参数量达到**2.4万亿**,采用全新迭代的MoE混合专家架构,综合推理性能、长文本处理、多模态理解、复杂任务规划能力全面超越前代Qwen3.7-Max版本,整体实力跻身全球第一梯队,可对标海外顶级旗舰模型,是当前面向复杂工程开发、多智能体协同、超长文档解析、专业办公自动化场景的最优国产基座模型。
847 0
|
4天前
|
自然语言处理 测试技术 API
通义千问Qwen3.8-Max-Preview全功能解析:2.4万亿参数旗舰模型深度使用指南
在大模型技术持续迭代的当下,通义千问推出的Qwen3.8-Max-Preview作为新一代旗舰预览版模型,凭借2.4万亿参数的超大规模、多模态融合能力与全场景适配特性,成为开发者与企业用户探索AI应用的核心工具。该模型采用稀疏混合专家(MoE)架构,是通义千问首个突破万亿参数的多模态模型,可同时处理文本、图像、视频与文档等多种数据形态,在全栈代码开发、复杂逻辑推理、长文档分析与多智能体协作等场景实现跨越式升级。本文将全面拆解Qwen3.8-Max-Preview的核心功能,详解API调用流程与配置方法,覆盖多场景实战技巧,帮助用户快速掌握这款旗舰模型的使用方法,充分释放其性能潜力。
386 1
|
7天前
|
人工智能
Qwen3.8抢先体验!正式版即将发布并开源!
千问Qwen3.8即将开源,参数达2.4T,进化速度以“天”计,实力媲美Fable 5。预览版Qwen3.8-Max已上线阿里Token Plan等平台,限时优惠:日间Credits低至1折,夜间更优,个人/团队版月付仅35元起!
766 34
|
6天前
|
人工智能 测试技术 语音技术
Qwen-Audio-3.0-TTS 正式发布!AI 语音从 “能说话” 升级到 “会带情绪表达”
阿里云发布Qwen-Audio-3.0-TTS语音合成大模型,支持细粒度标签控制(如[gasp][angry])、freestyle自由风格、16种语言及20种方言,声学鲁棒性强。含Flash(首包延时300ms)和Plus(全球榜单冠军)双版本,已在百炼平台开放调用。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
689 1
|
7天前
|
人工智能 自然语言处理 数据挖掘
Qwen3.8-Max 预览版全解析:2.4 万亿参数旗舰模型,Token Plan 限时优惠指南
Qwen3.8-Max-Preview是通义千问Qwen3系列旗舰MoE大模型,参数达2.4万亿,综合推理能力居行业第一梯队。支持思考/快速双模式,擅长大模型五大高难场景。现于阿里云百炼Token Plan、Qoder及QoderWork上线体验,个人版低至39元/月。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
591 1
Qwen3.8-Max 预览版全解析:2.4 万亿参数旗舰模型,Token Plan 限时优惠指南