实现点击菜单栏时，把页面嵌套进行显示

在页面里面嵌套子页面，我们学习的那个案例页面全是都是嵌套在子页面里面的

jQuery实现遮罩层功能 jquery嵌套页面_页面跳转


嵌套进来的页面会被压缩成上面那样的一小部分，解决这个问题需要用一段纯的Js代码，

为什么用Js不用Jquery呢？因为Jquery是Jquery加载完了再执行，Js是在页面加载的时候就开始执行的，所以Js加载速度快。

代码如下：

//根据浏览器大小调整iframe高度
 reSetSize();
 window.onresize = reSetSize;//即时性效果的计算
 function reSetSize() {
 var windowsHeight = window.innerHeight;
 document.getElementById(“content”).style.height = (windowsHeight - 110) + “px”;
 }

写一个方法reSetSize重新设置整个页面的高度，声明windowsHeight获取window窗口的高度，document.getElementById获取给定的子页面的Id，设置它的style.height高度的样式为整个页面的高度减去页面的头部、底部和各种边距，加上"px"单位，减去的高度多减一些是没有问题的，为了防止全局出现滚动条，写了这个方法后，一进到页面就会先执行Js ，所以就会先执行reSetSize();这个方法拿到内部的高度 innerHeight 减去指定的高度。

高度减少时全局出现了滚动条，这时候要是页面高度再受到了压缩，子页面也会出现滚动条，所以这时页面就出现了两个滚动条，看着不乐观，效果如下图：

jQuery实现遮罩层功能 jquery嵌套页面_页面跳转_02

当你拖动页面不断在改变页面窗口大小时，页面需要改变就用到了onresize这个方法，浏览器页面发生改变时触发，所以window.onresize = reSetSize;就是即时性效果的计算，窗口改变时触发onresize然后去执行reSetSize方法计算不断发送改变的窗口大小，从而实现拖动浏览器大小时，子页面大小也跟着窗口大小进行改变的动态调节。

菜单点击事件

$("#CollegeInfor").click(function () {
 $("#content").prop(“src”, “/SystemManagement/CollegeInfor/CollegeInfor”);
 });


获取要嵌套页面的菜单ID，绑定点击事件，获取iframe子页面的ID， 设置页面嵌套给content的路径，将prop的属性src路径指定为要跳转到的哪个页面，写法：/区域/控制器/视图 。
我们用的是绝对路径在开头位置要加 / 表示根目录，不加会变成路径拼接，在前面的路径拼接上后面的路径。
区分一下下面的方法

$("#CollegeInfor ").click(function () {
 window.location.href = "/SystemManagement/CollegeInfor/CollegeInfor "
 });


这个是页面跳转，跟嵌套的区别是：页面跳转会直接在浏览窗口打开一个新的页面，页面跳转同样也要获取页面的菜单ID，绑定点击事件，然后就是使用window.location.href窗口跳转的这个方法设置页面的路径，写法跟页面嵌套的一样是：/区域/控制器/视图