frame页面的隐藏和打开左侧和上方

最新推荐文章于 2025-11-26 15:59:01 发布

最新推荐文章于 2025-11-26 15:59:01 发布 · 342 阅读

文章标签：

#java #javascript #ViewUI

Java Web技术分析专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何利用jQuery实现iframe的大小变化、隐藏与显示功能，包括调整iframe的行数和列数，以及通过点击按钮控制iframe的可见状态。

本示例主要通过jquery改变frame的大小，实现隐藏和展示功能
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>