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

  <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>

 

你可能感兴趣的:(frame)