背景
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