关于系统后台高度及Iframe高度控制记录

关于系统后台高度及Iframe高度控制记录

背景

1.有项目上在园里找了些现成的前端框架组合,如adminTLE之类的。后来我加入了ifame控制内页内容。发现高度怎么都无法调整到合适的位置,在加载后各种调整算法都无法满足高度问题。后续不了了之,用更笨的办法去处理了。
2.最近又有新项目的启动,也是类似的前端框架组合,调试了一晚上,突然茅塞顿开!心血来潮赶紧记录,怕又忘了。
3.小公司职员一个,要求什么都会一点,什么都不精,如有不对,请大神指出!

问题

1.使用adminTLE之类的模板时,它本身是一个页面呈现的,没有使用ifame。所以左侧菜单都是再重复写,为此我将头部及左侧抽出做模板,右侧内容做ifame,动态切换。但是总是会有双滚动条出现,有时甚至会有三条。甲方爸爸天天揪着这些问题找你。。。。
2.首先申明没有为以下出现的前端模板打广告,H+在使用它时,这个问题就没有出现,看来H+作者也知晓了这个问题。
以下我列举各种情况说明:
在这里插入图片描述表示浏览器可视范围
在这里插入图片描述表示前端模板

a.页面可视范围高度比前端模板高度都大,就没有滚动条现象。大多情况下均为此情形。如下图:
在这里插入图片描述
b.页面可视范围高度比前端模板其中高度大,就会出现一条滚动条情况。
在这里插入图片描述一般在最右侧出现滚动条信息。此种情况我会经常忽视…觉得很奇怪怎么会这样。只是本应该属于左侧菜单滚动条跑到最右边了。

在这里插入图片描述这种是常有的情况。

c.页面可视范围高度比前端模板高度都大 ,就会出现双滚动条情况。
在这里插入图片描述就是这种情况,各种调整iframe高度算法,都无法解决对应情况。

方案

1.前端小白一个,为了尽快满足老板各种需求。通过比较倒是给我发现了针对此种情况有处理的前端模板
在这里插入图片描述作者一看就已经踩过此坑了!果然前人树下好乘凉!
在这里插入图片描述此种就是不支持的iframe的前端模板,或者是可以支持但现在我还没什么好的处理方案。
市面上很多类似的管理后台应该也有此类问题,只是左侧菜单较少,没有暴露。
在这里插入图片描述

2.对于不支持iframe的前端模板的处理方式:
a.改爆它!把它改成支持iframe的。前端小白请各位大神赐教,让adminTLE之类能支持iframe!
b.迁就它,不使用iframe。不使用iframe,那么左侧菜单及头部的用户信息每个页面都会去请求
i.可以使用浏览器本地缓存,localstroage存储
ii.后端缓存存储。
个人建议使用浏览器本地缓存。但菜单的加载需在前端单独写方法进行无刷新加载,菜单数据会暴露。请大神指教!

小结

此问题看似小问题,但是困扰我很长时间。一定要记录下来。没有发现根本问题点,还是处理起来还是挺繁琐的。

后续

浏览了相关资料,才发现这个根本不是问题的问题。。。。见https://blog.csdn.net/znw333/article/details/84558503

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值