window.parent 与 window.opener

时间:2023-03-09 18:19:48
window.parent 与 window.opener

window.parent针对iframe,window.opener针对window.open

父页面parent.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=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function openSubWin()
{
var _width = 300 ;
var _height = 200 ;
var _left = (screen.width - _width) / 2 ;
var _top = (screen.height - _height) / 2 ;
window.open("third.jsp",null,
"height=" + _height + ",width=" + _width + ",status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=" + _left + ",top=" + _top);
}
</script> <body>
<form name="form1"> name:<input type="text" name="username" id="username" value="haohao" />
<input type="button" value="弹出子页面" onClick="openSubWin();"> </form>
<hr/>
<div>
<iframe src="child.jsp"></iframe>
</div> </body>
</html>

子页面child.jsp:

 <script type="text/javascript">

 function fun(){
alert(window.parent.document.getElementById("username").value);
window.parent.document.getElementById("username").value="来自子页面的数据";
}
</script>
</head>
<body>
<p style="color:red;">子页面</p>
<input type="button" value="dianji" onclick="fun()"/>

运行后界面:

window.parent 与 window.opener

点击子页面按钮“dianji” :

window.parent 与 window.opener

页面third.jsp:

 <script type="text/javascript">
function UpdateParent()
{
var _parentWin = window.opener ;
_parentWin.form1.username.value = "来自子窗口 的参数" ;
}
</script>
<input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">

点击按钮“更新主页面的UserName内容”改变parent.jsp页面的值

window.opener是当前页面A通过open方法弹出一个窗口B,那在B页面上 window.opener就是A

window.parent是当前页面C通过location.href转到新的页面D,那在D页面上window.parent就是C

或者是页面E里套一个frame为F,那F页面的window.parent就是E

如何页面A里套一个frame为B,B页面有个按钮,点击open一个页面C,那么在C页面window.opener.parent就是A