frame框架

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属性：

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>