本示例主要通过jquery改变frame的大小,实现隐藏和展示功能
1、index.jsp
2、a.jsp页面
3、b.jsp页面
4、top.jsp页面
测试浏览器:ie7
1、index.jsp
<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.jsp" name="top" scrolling="No" noresize="noresize" id="top" />
<frameset cols="100,*" frameborder="no" border="0" framespacing="0">
<frame src="a.jsp" name="a" scrolling="No" noresize="noresize" id="a" />
<frame src="b.jsp" name="b" id="b" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes>
</html>
2、a.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 引入jquery的库 -->
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#aId").click(function(){
if($("#left_staus").val() == "打开"){
$("#left_staus").val("关闭");
closeFrameset();
}else if($("#left_staus").val() == "关闭"){
$("#left_staus").val("打开");
openFrameset();
}
})
});
function closeFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[1];
fs.cols = "25,*";
document.getElementById("aId").innerHTML = "a页面打开";
}
function openFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[1];
fs.cols = "65,*";
document.getElementById("aId").innerHTML = "a页面关闭";
}
</script>
</head>
<body bgcolor="red">
<div id="aId">a页面打开</div>
<input type="hidden" name="left_staus" id="left_staus" value="打开">
</body>
</html>
3、b.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body bgcolor="green">
<div id="b">b页面</div>
</body>
</html>
4、top.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>top.jsp</title>
<!-- 引入jquery的库 -->
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#top").click(function(){
if($("#top_staus").val() == "打开"){
$("#top_staus").val("关闭");
closeFrameset();
}else if($("#top_staus").val() == "关闭"){
$("#top_staus").val("打开");
openFrameset();
}
})
});
function closeFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[0];
fs.rows = "25,*";
document.getElementById("top").innerHTML = "top页面打开";
}
function openFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[0];
fs.rows = "65,*";
document.getElementById("top").innerHTML = "top页面关闭";
}
</script>
</head>
<body bgcolor="blue">
<div id="top">top页面打开</div>
<input type="hidden" name="top_staus" id="top_staus" value="打开">
</body>
</html>
测试浏览器:ie7