iframe中的各种跳转方法（转）

最新推荐文章于 2021-12-12 13:55:45 发布

偶然已经很多年

最新推荐文章于 2021-12-12 13:55:45 发布

阅读量1.0k

点赞数

一、背景
A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，在D中跳转页面的写法区别如下。

二、JS跳转
window.location.href、location.href 本页面跳转，D页面跳转
parent.location.href 上一层页面跳转，C页面跳转
top.location.href 最外层页面跳转，A页面跳转

三、链接或者form
D页面中有form
<form>: form提交后D页面跳转
<form target="_blank">: form提交后弹出新页面
<form target="_parent">: form提交后C页面跳转
<form target="_top"> : form提交后A页面跳转

四、刷新
parent.location.reload()：C页面刷新
window.opener.document.location.reload()：C页面刷新(使用子窗口的opener对象来获得父窗口对象)
top.location.reload()：A页面刷新

主要使用window.parent（当前窗口的父窗口）和window['子窗口名']来完成，示例如下：
一共三个文件，1.htm放到第一个iframe中，2.htm放到第二个iframe中，3.htm为放置这两个iframe的父窗口。
3.htm内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<iframe src="1.htm" name="first" style="border:2px solid red "></iframe>
<iframe src="2.htm" name="second" style="border:2px solid blue "></iframe>
</body>
</html>

1.htm内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
function Change()
{
window.parent.window['second'].location='1.htm';
}
function Change2()
{
window.parent.window['second'].location='2.htm';
}
</script>
<body>
第一个文档
<input type="button" value="让第二个iframe显示1.htm" onClick="Change();">
<input type="button" value="让第二个iframe显示2.htm" onClick="Change2();">
</body>
</html>

2.htm内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
第2个文档
</body>
</html>