利用js控制框架的跳转和刷新
对于web系统的开发，尤其是网站的建设，大部分需要使用到框架技术，其实这个框架技术已经推出来了很多年，但是对于我这个菜鸟来说还是有点陌生，今天就遇到了麻烦，我在利用js对框架进行操控，结果总是不尽如人意。现在把得到的经验与各位分享，欢迎前辈级别的高手批评指教。
新建框架。
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mainFrames</title>
</head>
<frameset rows="30%,40%,30%" cols="" border="1" frameborder="yes" >
<frame src="a.jsp" name="topFrame" scrolling="No" noresize="noresize" id="frames1" />
<frame src="b.jsp" name="mainFrame" scrolling="No" noresize="noresize" id="frames2" />
<frame src="c.jsp" name="bottomFrame" scrolling="No" noresize="noresize" id="frames3" />
<noframes>
<body>
<p>This page uses frames. The current browser you are using does not support frames.</p>
</body>
</noframes>
</frameset>
</html>
a.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">
<script type="text/javascript" src="./js/system.js"></script>
<title>a.jsp</title>
</head>
<body bgcolor="#F3f3f3">
<a onclick="loginC()" href="#" id="b">b.jsp</a><br>
<a onclick="loginB()" href="#" id="c">c.jsp</a><br>
<a onclick="loginA()" href="#" id="c">a 和 b </a><br/>
<center>
利用js对框架进行控制
</center>
</body>
</html>
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">
<script type="text/javascript" src="./js/system.js"></script>
<title>b.jsp</title>
</head>
<body bgcolor="#fed342">
this is b.jsp!
<a id="a" onclick="test()" href="#">a.jsp</a>
</body>
</html>
c.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>c.jsp</title>
</head>
<body bgcolor="#565321">
this is c.jsp
</body>
</html>
system.js
function loginA(){
alert("把B和C框架同时改变");
parent.mainFrame.location.href("c.jsp");
parent.bottomFrame.location.href("b.jsp");
}
function loginC(){
alert("把B框架的b.jsp换成c.jsp");
parent.mainFrame.location.href("c.jsp");
}
function loginB() {
alert("把C框架的c.jsp换成b.jsp");
window.parent.frames["bottomFrame"].location.href("b.jsp");
}
主要在于自己的js没有学过，很多js的内置对象或者为函数自己都。
对于框架的跳转可以为：
1:window.parent.frames["需要修改的框架"].location.href("跳转的路径");
2:window.parent.frames.item(框架在框架集数组中存放的位置).location.href("跳转的路径");
3：window.parent.frames.item("需要修改的框架 此为框架名称").location.href("跳转路径");
4：window.parent.框架名称.location.href("跳转路径");
5：window.parent["框架名称"].location.href("跳转路径");
6:window.parent.frames.框架名称.location.href("跳转路径");
新建框架。
main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mainFrames</title>
</head>
<frameset rows="30%,40%,30%" cols="" border="1" frameborder="yes" >
<frame src="a.jsp" name="topFrame" scrolling="No" noresize="noresize" id="frames1" />
<frame src="b.jsp" name="mainFrame" scrolling="No" noresize="noresize" id="frames2" />
<frame src="c.jsp" name="bottomFrame" scrolling="No" noresize="noresize" id="frames3" />
<noframes>
<body>
<p>This page uses frames. The current browser you are using does not support frames.</p>
</body>
</noframes>
</frameset>
</html>
a.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">
<script type="text/javascript" src="./js/system.js"></script>
<title>a.jsp</title>
</head>
<body bgcolor="#F3f3f3">
<a onclick="loginC()" href="#" id="b">b.jsp</a><br>
<a onclick="loginB()" href="#" id="c">c.jsp</a><br>
<a onclick="loginA()" href="#" id="c">a 和 b </a><br/>
<center>
利用js对框架进行控制
</center>
</body>
</html>
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">
<script type="text/javascript" src="./js/system.js"></script>
<title>b.jsp</title>
</head>
<body bgcolor="#fed342">
this is b.jsp!
<a id="a" onclick="test()" href="#">a.jsp</a>
</body>
</html>
c.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>c.jsp</title>
</head>
<body bgcolor="#565321">
this is c.jsp
</body>
</html>
system.js
function loginA(){
alert("把B和C框架同时改变");
parent.mainFrame.location.href("c.jsp");
parent.bottomFrame.location.href("b.jsp");
}
function loginC(){
alert("把B框架的b.jsp换成c.jsp");
parent.mainFrame.location.href("c.jsp");
}
function loginB() {
alert("把C框架的c.jsp换成b.jsp");
window.parent.frames["bottomFrame"].location.href("b.jsp");
}
主要在于自己的js没有学过，很多js的内置对象或者为函数自己都。
对于框架的跳转可以为：
1:window.parent.frames["需要修改的框架"].location.href("跳转的路径");
2:window.parent.frames.item(框架在框架集数组中存放的位置).location.href("跳转的路径");
3：window.parent.frames.item("需要修改的框架 此为框架名称").location.href("跳转路径");
4：window.parent.框架名称.location.href("跳转路径");
5：window.parent["框架名称"].location.href("跳转路径");
6:window.parent.frames.框架名称.location.href("跳转路径");