本文共 1529 字，大约阅读时间需要 5 分钟。

1.整体说明

主界面布局使用常规方式:

1. 左侧是菜单栏，包含一、二级菜单，可隐藏、恢复；
2. 右侧是功能区，点击菜单对应切换页面。
3. 切换使用ifram标签加载对应页面。

2.布局

用boostrap方式，整个屏幕划分成2列，

3.菜单

参考网上的样式。见

    
                                                                                系统管理                                                                                                        
    
                            
     
 用户管理
                            
     
 菜单管理
                            
     
 角色管理
                            
     
 修改密码
                            
     
 日志查看
                        
    
                    

3.切换

iframe标签

iframe标签是浏览器中的浏览器，相当于“画中画”。在整个窗口不变的情况下，加载指定的url。

高度自适应

需要根据加载目标文档的高度，重新设定iframe高度；否则iframe固定大小，可能显示不全。

function reinitIframe() {                var iframe = document.getElementById("iframe-page-content");            var bHeight = iframe.contentWindow.document.body.scrollHeight;             iframe.setAttribute('frameborder', '0');            iframe.style.height=bHeight+'px';        };

无边框

正常情况下，通过属性frameborder=0就可以，但我却消不掉。只好再重设大小时，再次设置就可以了。不清楚根本原因。

4.遗留的问题：

1. 菜单根据权限控制
2. 打开的不同页面应以页签形式保留
   &：用户使用中，可能会打开多个页面对比数据，因此需要保留已经打开的。现在是直接重新加载了，会有使用不便。
   解决思路是：
   1.增加nav对象，保存iframe对应的标签；
   2.点击菜单，新生成一个iframe对象，并生成一个标签
   3.原来已经打开的iframe隐藏
   4.通过点击标签，控制iframe的显示或隐藏。