javascript：父窗口与子窗口的数据传递及方法调用

有时候我们需要在新窗口执行一些代码并要求将执行的结果返回到这个页面，那么就需要下面的方法，js中常用的就是下面这两种方法。

1.window.showModalDialog(url,args,dialogattrs)
该方式不支持window.opener。
参数说明：
url：子页面地址
agrs：父页面传给子页面的参数，可以是任意类型（数组也可以）
dialogattrs：子页面的样式参数

父页面通过showModalDialog(url,para,feature)第二个参数para传参数给子页面。
子页面通过window.dialogArguments获得父页面穿过来的东西，即获得传过来的的二个参数。
子页面通过window.dialogArguments.xxxx获得父页面的东东。

子页面获取父页面元素或调用父页面方法：
父页面：

showModalDialog(url,[1,2,3],feature); //父页面传一个数组给子窗口
showModalDialog(url,window,feature); //父页面把自己的window参数传给子窗口

子页面：

var name = window.dialogArguments.document.getElementById("userName").value; //得到父页面的控件
var name = window.dialogArguments.fresh(); //调用父页面的方法

这里的window.dialogArguments就相当于父页面的window，它是通过showModalDialog方法的第二个参数window传过来的，当然也可以传数组或其它变量。

父页面获取子页面返回值：
子页面中通过window.returnValue来设置返回值，上面的value拿到的就是这个值，然后父页面中可以对这个值进行处理，实现交互处理。
父页面：

/**
* 弹出公司选择窗口
*/
function showOrg() {
var sUrl = "./DispatchAction.do?efFormEname=HS0101";
var sStyle = "dialogWidth:570px;dialogHeight:446px;center:yes;scroll:yes;edge:sunken;status:yes";
var obj = window.showModalDialog(sUrl, sStyle);
if(obj!=null){
document.myform1.org_code.value = obj.org_code;
document.myform1.org_name.value = obj.org_name;
}
if (document.myform1.org_code.value == "undefined" || document.myform1.org_name.value == "undefined") {
document.myform1.org_code.value = "";
document.myform1.org_name.value = "";
}
return;
}

子页面：

<script>
function returnOrg(org_code,org_name){
var obj = new Object();
obj.org_code = org_code;
obj.org_name = org_name;

window.returnValue =obj;
window.close();
}
</script>

<input type="button" value="返回" onclick="javascript:returnOrg('Google','谷歌')">

注：模式对话框的应用就在于它的返回值，可以返回简单字符串，也可以返回数组，非模式对话框类似。

2.window.open
window.open打开的子窗口有window.opener属性。
子窗口通过window.opener.xxxx获得父窗口的东东。
如：

window.opener.document.getElementById("userName"); //得到父页面的控件
window.opener.fresh(); //调用父页面的js方法

示例程序：
【父窗口】代码如下：

<script>
function show_child(){
var child=window.open("child.html","child","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
/*if(!child.closed){
if(!window.close()){
var textValue = frm.txt.value;
parent.frm0.txt0.value = textValue;
}
else{
window.close();
child.close();
}
}*/
}
</script>
<a href="javascript:show_child();">打开子窗口</a>
<form name="frm0">
<input type="text" name="txt0" id="txt0"> 
</form>

【子窗口】代码如下：

<script>
function choseItem(){
var v="";
var check_item = document.frm.item;
for(i=0;i<check_item.length;i++){
if(check_item[i].checked){
v+=","+check_item[i].value;
}
document.frm.txt.value=v.replace(/^,{1}/,"");
}
}
function foo(){
window.close();
window.opener.document.getElementById("txt0").value=document.getElementById("txt").value;
}
</script>
<body>
<form name="frm">
<input type=checkbox name=item value=1 onclick="choseItem();">a
<input type=checkbox name=item value=2 onclick="choseItem();">b
<input type=checkbox name=item value=3 onclick="choseItem();">c
<input type=checkbox name=item value=4 onclick="choseItem();">d
<input type=text name="txt" id="txt">
</form>
<input type=button value="关闭" onclick="foo();">
</body>