标签:
有两种情况:
一,框架(iframe)形式,这时用到是window.parent,详情如下:
1,1.html代表的是父窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>父页面</title>
</head>
<body>
<form name="form1"
id="form1">
<input
type="text" name="username" id="username"
/>
</form>
<iframe src="2.html"
width="100%">
</body>
</html
2,2.html代表的子窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>子页面</title>
<script type="text/javascript">
function changeValue(val){
var _parentWin = window.parent
;
_parentWin.form1.username.value
= val ;
}
</script>
</head>
<body>
<input type="file" name="filename"
onchange="changeValue(this.value);" />
</body>
</html>
这时在子窗口(iframe窗口)所做的改变,会改变父窗口中username的值。
二,新开窗口形式,这时用到是window.opener,详情如下:
1,1.html代表的是父窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>父页面</title>
</head>
<body>
<form name="form1"
id="form1">
<input
type="text" name="username" id="username"
onclick="window.open(‘2.html‘);"
/>
</form>
<!-- <iframe src="2.html"
width="100%"></iframe>
-->
</body>
</html
2,2.html代表的是子窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>子页面</title>
<script type="text/javascript">
function changeValue(val){
var _parentWin
= window.opener
;
_parentWin.form1.username.value
= val ;
}
</script>
</head>
<body>
<input type="file" name="filename"
onchange="changeValue(this.value);" />
</body>
</html>
这时,在新开的子窗口页面中,选择浏览按钮选择文件后,父窗口的username中值会是你选择的文件地址,这里我们可以根据实际需要,进行改变,比如在上传成功后,将生成的文件名放到父窗口的username字段中,以便插入数据库等等。
上面两种情况都是子窗口改变父窗口的内容,其实和子窗口调用父窗口的元素是一样的道理,这里我以window.open新开窗口的形式,让子窗口调用父窗口的元素值。
1,1.html父窗口 代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>父页面</title>
</head>
<body>
<form name="form1"
id="form1">
<input
type="text" name="username" id="username" value="胡宇轩"
onclick="window.open(‘2.html‘);"
/>
</form>
<!-- <iframe src="2.html"
width="100%"></iframe>
-->
</body>
</html>
2,2.html子窗口,代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>子页面</title>
<script type="text/javascript">
function changeValue(){
var _parentWin
= window.opener ;
var obj =
document.getElementByIdx_x("myname");
obj.value =
_parentWin.form1.username.value;
}
</script>
</head>
<body
onload="changeValue()">
<input type="text" name="myname" id="myname"
/>
</body>
</html>
当新开窗口时,子窗口加载时,子窗口的myname值会调用父窗口中的username值“胡宇轩”,这只是个例子,具体也根据实际情况调用父窗口的其他元素内容。
标签:
原文地址:http://www.cnblogs.com/liujingen/p/4711610.html