关于用iframe大框架覆盖小框架的问题

2024-03-28 14:23:05

最近在做一个后台管理系统，布局是常见的广字形的布局。因为主要要放到后台这块来开发，我们只负责写静态页面，所以不让用vue，最后决定用layui搭建整体框架，用jQuery来做。其中用的到了比较古老的iframe框架嵌套来做。其他页面布局都一样，所以，所有页面都嵌套到body主体页面的iframe里就行。

广字形布局：

这里设置name属性homepage，写好的页面设置href链接跳转，target为homepage即可在框架内显示。

但是修改密码页的原型要求是这样的。

所以就需要一个大的iframe把原来右侧主体的iframe覆盖掉。

具体实现方法就是：

在最大的body里面的最下面添加一个盒子bodybox，把盒子进行定位，定位到头部header下面的位置，在这个大盒子里嵌套iframe，重新命名name属性值为bodypage，并设置宽高到为100%。并且给修改密码图标绑定单击事件，点击时将左侧侧边栏和右侧主体盒子都隐藏，把当前的bodybox盒子显示出来。当点击头部的tab切换按钮时，再将侧边栏和主体显示，bodybox隐藏即可。在这里因为用的时layui框架，所以有需要用到改源码样式的地方最好给成行内样式，要不不生效。

具体实现代码如下：

页面结构：

修改图标的点击事件：

点击tab切换时的点击事件：

最后就实现了原型图中的效果了

关于用iframe大框架覆盖小框架的问题相关推荐

python3数据库框架_python3大框架简介小收藏
在python语言中,有着特别厉害的三大框架. 这三个框架分别为:Flask框架,Tornado框架,Django框架. Flask框架:Flask诞生于2010年,是Armin ronacher(人 ...
2017深度学习最新报告及8大主流深度学习框架超详细对比（内含PPT）
2017深度学习最新报告(PPT) 深度学习领军人物 Yoshua Bengio 主导的蒙特利尔大学深度学习暑期学校目前"深度学习"部分的报告已经全部结束. 本年度作报告的学术 ...
html框架集把那根框架隐藏,HTML 框架集 frameset 和内嵌框架 iframe
HTML 框架集 frameset 和内嵌框架 iframe 今天总结和 < ifrme> 两个标签. frameset 标签用于定义一组框架集, 将多个窗口组合在一个框架集中, 各个子 ...
Java开发人员必备工具之 10 个大数据工具和框架
先来看看大数据的概念.根据维基百科,大数据是庞大或复杂的数据集的广义术语,因此传统的数据处理程序不足以支持如此庞大的体量. 在许多情况下,使用SQL数据库存储/检索数据都是很好的选择.而现如今的很多情 ...
最适合Java开发者的大数据工具和框架
http://www.xsh-gz.com/javatrain/20170104/2222.html 转自最适合Java开发者的大数据工具和框架发布时间: 2017-01-04 17:12:58 ...
客快物流大数据项目学习框架
文章目录客快物流大数据项目学习框架前言一.项目简介二.功能介绍三.项目背景四.服务器资源规划五.技术亮点及价值六.智慧物流大数据平台客快物流大数据项目学习框架前言利用框架的力量, ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
大数据分布式计算开源框架Hadoop的介绍和运用
Hadoop是Apache开源组织的一个分布式计算开源框架,在很多大型网站上都已经得到了应用,如亚马逊.Facebook和Yahoo等等.对于我来说,最近的一个使用点就是服务集成平台的日志分析.服务集 ...
基于java SSM框架+微信小程序实现电子书城阅读器演示【附项目源码+论文说明】分享
基于java SSM框架+微信小程序实现电子书城阅读器演示摘要而随着互联网技术的不断发展,互联网已经渗入到我们生活中的各个方面.移动设备的普及使我们的生活发生了翻天覆地的变化,这种变化也深刻影响着 ...

最新文章

热门文章