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天前
|
人工智能 弹性计算 运维
|
3天前
|
缓存 人工智能 安全
GPT-5.6 Terra与GPT-5.5性能实测:成本减半后的跑分对比与快速迁移指南
GPT-5.6 Terra 的定价为每百万 token 输入 2.50/输出 15。GPT-5.5 则是 5/ 30。Terra 的每一项费率,包括 $0.25/M 的缓存读取,都恰好是 GPT-5.5 的一半,因此在任何工作负载组合下,Terra 都固定 便宜 2.0x。以每天 10 万次请求、3K token 提示词计算,大约是 Terra 每天 2,000,GPT−5.5每天 4,000,即每月约 60,000对 120,000。问题在于:OpenAI 没有发布任何针对 Terra 的编码基准。那个著名的 91.9% Terminal-Bench 数字是 Sol 在 Ul
|
2天前
|
SQL 人工智能 自然语言处理
大模型内容安全实时防护:恶意Prompt注入拦截、越权阻断与熔断机制方案.166
本文系统阐述大模型输入安全防护体系,涵盖提示词注入、恶意Prompt拦截、越权阻断与输入熔断四大核心风险及应对方案。提出四层防护架构(预处理、检测、鉴权、熔断),结合规则引擎、语义识别与RBAC权限控制,实现全链路实时防护,保障业务合规、数据安全与服务稳定。
217 1
|
26天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
10天前
|
人工智能 编解码 物联网
2026 最新Stable Diffusion 本地部署教程 下载安装使用详细图解(含官网安装包)
Stable Diffusion(SD)是2022年发布的开源文生图模型,由Stability AI等联合开发。支持文生图、图生图、局部重绘等,依托VAE降低算力需求,可在消费级显卡运行。本文提供秋葉aaaki制作的Windows整合包(含图形界面与插件),开箱即用,零配置启动。
|
12天前
|
人工智能 缓存 安全
Claude Code 封号真实原因曝光,这次彻底不装了,直接针对国内开发者的账号下手?
Claude Code 封号潮背后:逆向扒出客户端隐写区域标记,Anthropic 政策收紧叠加 DeepSeek 7 月涨价,国产替代更紧迫。
|
21天前
|
存储 人工智能 监控
QoderWork完全指南:从入门到精通,把“AI实习生”变成你的全能工作搭档
阿里云2026年推出的桌面端AI工作助手QoderWork,不止聊天,更可动手干活:本地运行、安全可控,支持文件整理、数据分析、PPT生成、网页开发等;内置专家套件、多Agent协作与自定义Skills,让AI真正成为你身边的“AI实习生”。
|
17天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
512 127
|
3天前
|
人工智能 缓存 JSON
刚刚 GPT-5.6 发布,吊打 Claude 5 和 Grok 4.5?一手实测来啦!
GPT-5.6 刚发布,跑分号称超越 Fable 5,真的假的?附一手实测,让 3 个最强 AI 编程模型 GPT-5.6 Sol、Claude Fable 5、Grok 4.5 在 Cursor 里同时一把梭开发网页游戏,看看最新模型到底谁更能打。
247 0