父窗口:a1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.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">
</head>
<script language="JavaScript">
</script>
<body>
<form name="form1" action="test.html" method="post" >
客户id: <input type="text" name="cid" value="" id="cid" ><br>
客户名称<input type="text" name="cname" value="" id="cname" >
<input type="button" name="ok" value="请选择客户" οnclick="openWin();"/>
</form>
</body>
<script language="JavaScript">
function openWin(){
//showModalDialog:建立有模式的对话框,弹出a2.html页面后不能再操作a1.html页面的内容
// window.showModalDialog("./a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes");
//showModelessDialog:建立无模式对话框,弹出a2.html页面后能在操作a1.html页面的内容
window.showModelessDialog("./a2.html",window,"status:no;resizable:yes;dialogHeight:210px;dialogWidth:360px;unadorne:yes");
}
function setValues(id,name){
/**
* 客户id: <input type="text" name="cid" value="" id="cid" ><br>
客户名称<input type="text" name="cname" value="" id="cname" >
*/
document.getElementById("cid").value = id;
document.getElementById("cname").value = name;
}
</script>
</html>
子窗口:a2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a2.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">
</head>
<script language="JavaScript">
function viewData(id,name){
var dialogElement = window.dialogArguments;
dialogElement.setValues(id,name);
window.close();
}
</script>
<body>
<table border="1">
<tr>
<td>操作</td>
<td>客户id</td>
<td>客户名称</td>
</tr>
<tr>
<td><input type="button" value="选择" id="ss" οnclick="viewData('001','深圳华为')"></td>
<td>001</td>
<td>深圳华为</td>
</tr>
<tr>
<td><input type="button" value="选择" οnclick="viewData('002','用友软件')"> </td>
<td>002</td>
<td>用友软件</td>
</tr>
</table>
</body>
</html>
还可以在子窗口中直接获得并操作父窗口的组件:
function viewData(id,name){
//实现2个页面中的调用
var dialogElement = window.dialogArguments;
/**
* 对a1.html的2个文本框赋值
* a1.html
* 客户id: <input type="text" name="cid" value="" id="cid" ><br>
客户名称<input type="text" name="cname" value="" id="cname" >
*/
dialogElement.document.getElementById("cid").value = id;
dialogElement.document.getElementById("cname").value = name;
//关闭当前对口框
window.close();
}