最新消息:

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

Web 观测者 6896浏览

有时候我们需要在新窗口执行一些代码并要求将执行的结果返回到这个页面,那么就需要下面的方法,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">  <!-- 注意这里一定要写ID属性不然FF下取不到值 -->
</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>

小结:一般情况下,windows.open因为自定义的比较多,所以用windows.open的较多,上面的很多网页编辑器喜欢用showModalDialog,实在不知道用哪个的的,就用window.open吧,很多成熟的cms系统都是用的window.open。

转载请注明:观测者 » javascript:父窗口与子窗口的数据传递及方法调用