嵌套页面

开发工具与关键技术:VS、JQuery
作者:LJR
撰写时间:2019年 5 月 12 日

1.在一些页面中,可能会遇到嵌套页面的情况,嵌套页面的意思就是从本来的一个页面中,在一个大的div中有很多空间没有用到的,那么这些空间我们是可以嵌套另外一个页面进来的。
2. 就比如下图中的表格,这个表格页面嵌套进来的,原来的视图只有头部蓝色部分和左边的导航栏部分的,导航栏里面的标签,我们点击的标签的功能页面就会在右边表格的部分进行实现出来。实现嵌套页面这个效果,其实很简单的。
在这里插入图片描述

3.来到这个视图的代码部分,在HTML里面相对应的部分,添加这一句代码,iframe就是在一个div视图里面会继续添加另外一个div文档的样式,我们把这个样式叫内联框架,这样我们在要嵌套页面的时候获取到content 这个ID值给它添加相对应的框架就行了,最后就是重点JavaScript代码了。
(目前iframe支持的游览器有:IE、Fire、Chrome、Safan、Opera、)
在这里插入图片描述

  1. (1)我们就可以用window.onresize去获取到变更后的页面宽度。
    (2)页面高度和页面宽度有点不一样,页面高度需要调整一下,写一个方法获取到窗口显示区的高度,不过获取到的高户还是要设置的,要把视图中头部的蓝色部分去掉才是要嵌套的区域的高度。
    (3)再用刚刚写的方法reSetSize去根据游览器显示的大小去调整iframe的高度,让它有一个自适应的效果。
    (4)写好嵌套区域的高度和宽度后,最后就可以把信息嵌套进来就可以了,获取到点击的标签的ID给它一个点击事件,然后获取到iframe设值src属性就可以显示出来了。

在这里插入图片描述

一个简单的页面嵌套就这样就可以实现了。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值