javascript

Frameset的js控制跳转

1,098 阅读

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=”http://blog.163.com/wenchangqing_live/blog/a.jsp” name=”topFrame” scrolling=”No” noresize=”noresize” id=”frames1″ />
<frame src=”http://blog.163.com/wenchangqing_live/blog/b.jsp” name=”mainFrame” scrolling=”No” noresize=”noresize” id=”frames2″ />
<frame src=”http://blog.163.com/wenchangqing_live/blog/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=”http://blog.163.com/wenchangqing_live/blog/./js/system.js”></script>
<title>a.jsp</title>
</head>
<body bgcolor=”#F3f3f3″>
<a onclick=”loginC()” href=”http://blog.163.com/wenchangqing_live/blog/#” id=”b”>b.jsp</a><br>
<a onclick=”loginB()” href=”http://blog.163.com/wenchangqing_live/blog/#” id=”c”>c.jsp</a><br>
<a onclick=”loginA()” href=”http://blog.163.com/wenchangqing_live/blog/#” 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=”http://blog.163.com/wenchangqing_live/blog/./js/system.js”></script>
<title>b.jsp</title>
</head>
<body bgcolor=”#fed342″>
this is b.jsp!
<a id=”a” onclick=”test()” href=”http://blog.163.com/wenchangqing_live/blog/#”>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”);

}

对于框架的跳转可以为：
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(“跳转路径”);