使用iframe解决导航菜单刷新问题

使用背景:

    项目架构时采用了sitemesh作为页面布局框架(品字形结构,上部banner,下部左方树形菜单,右方内容区域),采用后,页面开发提高了很多,只需要开发右方content内容区域的jsp页面.

    但是凡事顾此即失彼,由于采用sitemesh,当单击左方菜单时,右方内容展示的同时,左边打开的树形节点立即关闭,记录不了树被操作的状态,体验很差.

改进方法
    想到了3种:
    1. ajax异步刷新.目测与sitemesh搭配不太好使用.
    2. 菜单项是个锚节点,点击时,带上标志其所在位置的键值对参数,传到后台,再由后台将该键值对随新页面被sitemesh装配后返回,再通过js将相关菜单展开.
       虽然这样可以解决菜单记忆问题,但是页面刷新,和菜单项重新由闭合项展开的状态很起来很山寨.
    3. 采用iframe.每一个iframe操作互不影响.刚好可以曲线解决上述问题.

开始对原项目进行改进
    步骤1:
    既然选择不用sitemesh,就抛弃的彻底点,去除依赖jar包,去除web.xml相关配置,去除sitemesh配置文件,去除default页面对其的引用和布局代码.
   
    步骤2:
    将sitemesh布局诸如<jsp:include 和 <decorator:body/> 之类代码去掉,转而采用iframe布局,修改布局代码如下:

<div class="main">
<div>
<div class="main_left" style="float: left;">
<iframe allowtransparency="true" src="left_nav.jsp" id="left_frame"
name="left_frame" width="211px" height="600px"
frameborder="0" > </iframe>
</div>

<div style="float: left;">
<iframe allowtransparency="true" id="right_frame" name="right_frame"
width="813px" height="600px" frameborder="0" align="right" >
</iframe>
</div>

</div>
</div>

     步骤3:
     left_nav.jsp中,锚点添加target属性,值为内容区域iframe的id值.

     代码如下:
<li>
<a onclick="javascript:OpenOrCloseThisMenu(6)" href="javascript:void(null)">
<span class="cate_name">图书分类</span>
<em></em>
</a>
</li>
<li id="LM6" class="seclect_li" style="display: none">
<a href="infoTechnology.do?method=upload" target="right_frame">信息技术</a>
</li>