您的位置：首页 > 运维架构

用open或showModalDialog实现父子页面传值

2015-12-01 01:42 381 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航