嵌套页面

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

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

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

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

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