JS使用showModalDialog实现父子窗口数据回传

问题背景与需求分析

在开发过程中，常遇到客户需要管理收货地址的场景。由于商户地址数量庞大，仅靠下拉框罗列所有历史地址并不合适，且客户要求支持按姓名筛选地址。因此，必须通过打开一个小窗口来完成地址的选择操作，核心问题在于如何将小窗口中用户选择的值回传至父窗口。

showModalDialog方法介绍

JavaScript提供了showModalDialog方法，适用于此类场景。该方法用于打开一个模态窗口，即窗口打开后父窗口处于不可操作状态，只有当子窗口执行完毕并关闭后，父窗口的操作才能继续。具体实现上，提供一个地址选择入口，点击时触发btn_click()事件。

父窗口JS代码实现如下：

function btn_click() 
{ 
      var returnValue = window.showModalDialog('chooseAddr.aspx', window, 'dialogWidth=500px;dialogHeight=600px;status=no'); 
 
      if (vReturnValue !== "" && vReturnValue !== undefined) 
      { 
        //处理子窗口的返回值 
      } 
 } 

在子窗口中，当用户完成筛选和选择动作并点击确定时，触发returnVal()事件。

function returnVal() 
{ 
      var rtArr = new Array(); 
      rtArr[0] = "test0"; 
      rtArr[1] = "test1"; 
      window.returnValue = retArr; 
 
      window.close();//关掉子窗口，才能继续父窗口的操作 
} 

通过上述步骤，完成了父子窗口间的数据交互。此外，父窗口向子窗口传值也很简单。在本例中，为了获取用户之前填写过的地址，需要知道操作用户的ID，只需在打开子窗口的URL中通过get方式传递参数?id=xxx即可。

window.showModalDialog的第一个参数，即打开的子窗口地址中加上参数?id=xxx，没错get方式传过去就OK了。 

以上即为JS获取子窗口返回数据的实现方法，供参考。