1、主界面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %> <jsp:include page="/jsp/other/isLoginout.jsp" ></jsp:include> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="../js/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="../js/common/html5.js"></script> <script type="text/javascript"> function logOff () { $.ajax({ url:'../updateOnline.action', type:'post', dataType:'json', success:function(flag){ if(flag){ }else{ } }, error:function(){ } }); } </script> </head> <frameset cols="207,*" frameborder="no" border="0" framespacing="0" scrolling="yes" onbeforeunload="logOff()"> <frame src="<%=request.getContextPath()%>/jsp/leftmenu.jsp" frameborder="0" name="leftFrame" scrolling="no" noresize="noresize" id="leftFrame" /> <frameset rows="40,*" frameborder="no" border="0" framespacing="0"> <frame src="<%=request.getContextPath()%>/jsp/top.jsp" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" frameborder="0"></frame> <frame src="<%=request.getContextPath()%>/jsp/main.jsp" name="mainFrame" scrolling="yes" noresize="noresize" id="mainFrame" frameborder="0"></frame> </frameset> </frameset> </html>
2、当加载上述界面时就会加载对应的jsp：例如leftmenu.jsp。
3、显示的jsp界面要在mainFrame的frame中，需要使用target属性：
<a onclick='addCss(this)' target='mainFrame' href='"+url2+">"+name+</a>
4、刷新某一个frame时：
window.parent.frames['leftFrame'].location.reload();
5、当session失效时，后台通过拦截器拦截到url跳转到login.jsp界面时，由于此时frame没有退出，连接指向mainFrame窗口，会出现窗口叠加现象，通过javascript解决方法如下：
//左边菜单栏地址的target属性指的是mainFrame if(window.top!=window){ window.top.location="login.jsp"; }
6、将页面加入到mainFrame中：
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="js/common/jquery-1.9.1.min.js" type="text/javascript"></script> <style type="text/css"> body { margin: 0px; padding: 0px; background: url(../img/leftbj.gif) repeat-y; } ul li { list-style: none; } #leftDiv { width: 100%; overflow: hidden; display: block; height: 100%; margin-top: 32px; } #leftDiv ul li span { font-size: 14px; background: url(../img/navbj01.jpg) no-repeat; height: 35px; display: inline-block; line-height: 35px; width: 100%; padding-left: 25px; color: white; } #leftDiv ul li { margin-left: -40px; width: 207px; } #leftDiv ul li ul li { line-height: 28px; height: 28px; width: 207px; background-color: #336f9c; border-bottom: 1px solid #4183b4; } #leftDiv ul li ul li a { text-decoration: none; cursor: pointer; font-size: 13px; padding-left: 50px; color: white; } #leftDiv ul li ul li a:hover { text-decoration: underline; } </style> <script type="text/javascript"> $(function() { $("#leftDiv>ul>li>span").css("cursor", "pointer").click(function() { $(this).siblings("ul").toggle(); }); $("#leftDiv>ul>li>ul>li a").click(function() { $("#leftDiv>ul>li>ul>li a").css({ color : "white" }); $(this).css({ color : "#ffc600" }); }); }); </script> </head> <body> <div id="leftDiv"> <ul> <li><span>统计数据</span> <ul> <li><a href="user/list.do" target="mainFrame">用户列表</a> </li> <li><a href="admin/auth.do" target="mainFrame">权限列表</a> </li> </ul>
</li>
....
</ul> </div> </body> </html>