用open或showModalDialog实现父子页面传值
1 open
如果实现open窗口父子页面传值，在父页面声明一个函数，函数要求要有参数，用来接收子页面传过来的值，子页面通过调用“window.opener.父页面函数”来实现将值传回父页面。
父页面：
//open窗口 function chooseDept() { window.open("listDept.html", "", "width=150px,height=400px"); } function receiveValue(param) { var dept = document.getElementById("dept"); dept.value = param; }
子页面：
//open窗口父子页面接传值 function sure() { var dept = document.getElementsByName("dept"); for(var i=0;i<dept.length;i++) { if(dept[i].checked) { window.opener.receiveValue(dept[i].value); window.close(); } } }
2 showModalDialog
showModalDialog窗口，它与open窗口类似，但是对于showModalDialog窗口，当弹出时，父页面是不能被使用的，而open窗口正好相反。
声明格式:
window.showModalDialog("路径","窗口名","参数");
如何实现父子页面接传值，在父页面中打开窗口时，要声明一个变量并赋值。
//showModalDiaglog窗口 function otherChooseDept() { var param = window.showModalDialog("listDept.html", "", "dialogWidth=150px;dialogHeight=400px;"); var dept = document.getElementById("dept"); dept.value = param; }
然后在子页面中，将要传的值赋值给window.returnValue,这样就会把值传给父页面中声明的变量。
//showModalDialog窗口父子页面接传值 function otherSure() { var dept = document.getElementsByName("dept"); for(var i=0;i<dept.length;i++) { if(dept[i].checked) { window.returnValue = dept[i].value; window.close(); } } }
下面是测试html代码:
父页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addEmployee.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//open窗口
function chooseDept() {
window.open("listDept.html", "", "width=150px,height=400px");
}
function receiveValue(param) {
var dept = document.getElementById("dept");
dept.value = param;
}
//showModalDiaglog窗口
function otherChooseDept() {
var param = window.showModalDialog("listDept.html", "",
"dialogWidth=150px;dialogHeight=400px;");
var dept = document.getElementById("dept");
dept.value = param;
}
</script>
</head>
<body>
<form>
<table align="center">
<tr>
<td>
姓名：
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" />
男
<input type="radio" name="sex" />
女
</td>
</tr>
<tr>
<td>
地址：
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
部门：
</td>
<td>
<input type="text" id="dept" />
<input type="button" value="请选择" onclick="otherChooseDept()" />
</td>
</tr>
<tr>
<td>
<input type="button" value="确认" />
</td>
<td>
<input type="button" value="返回"
onclick="javascript:history.go(-1)" />
</td>
</tr>
</table>
</form>
</body>
</html>
子页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>listDept.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//open窗口父子页面接传值
function sure() {
var dept = document.getElementsByName("dept");
for(var i=0;i<dept.length;i++) {
if(dept[i].checked) {
window.opener.receiveValue(dept[i].value);
window.close();
}
}
}
//showModalDialog窗口父子页面接传值
function otherSure() {
var dept = document.getElementsByName("dept");
for(var i=0;i<dept.length;i++) {
if(dept[i].checked) {
window.returnValue = dept[i].value;
window.close();
}
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>选择</td>
<td>部门</td>
</tr>
<tr>
<td>
<input type="radio" name="dept" value="市场部"/>
</td>
<td>市场部</td>
</tr>
<tr>
<td>
<input type="radio" name="dept" value="人事部"/>
</td>
<td>人事部</td>
</tr>
<tr>
<td>
<input type="radio" name="dept" value="研发部"/>
</td>
<td>研发部</td>
</tr>
<tr>
<td>
<input type="radio" name="dept" value="财务部"/>
</td>
<td>财务部</td>
</tr>
<tr>
<td>
<input type="radio" name="dept" value="后勤部"/>
</td>
<td>后勤部</td>
</tr>
<tr>
<td clospan="2">
<input type="button" value="确定" onclick="otherSure()"/>
</td>
</tr>
</table>
</body>
</html>