子窗口创建及父窗口与子窗口之间通信

 

 

原文：http://squirrelrao.iteye.com/blog/848975

1、Javascript弹出子窗口

可以通过多种方式实现，下面介绍几种方法

(1) 通过window对象的open()方法，open()方法将会产生一个新的window窗口对象
  
  其用法为：
 window.open(URL,windowName,parameters);

URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；

windowName:描述被打开的窗口的民称，可以使用'_top'、'_blank'等内建名称，这里的名称跟<a href="..." target="...">里的target属性是一样的。

parameters:描述被打开的窗口的参数值，或者说是样貌，其包括窗口的各个属性值，及要传入的参数值。

例如：

打开一个 400 x 100 的干净的窗口：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

也可以这样写： var newWindow = open('','_blank');

参数说明如下：
  
top=# 窗口顶部离开屏幕顶部的像素数 
left=# 窗口左端离开屏幕左端的像素数 
width=# 窗口的宽度 
height=# 窗口的高度 
menubar=... 窗口有没有菜单，取值yes或no 
toolbar=... 窗口有没有工具条，取值yes或no 
location=... 窗口有没有地址栏，取值yes或no 
directories=... 窗口有没有连接区，取值yes或no 
scrollbars=... 窗口有没有滚动条，取值yes或no 
status=... 窗口有没有状态栏，取值yes或no 
resizable=... 窗口给不给调整大小，取值yes或no

(2) 在javascript中除了通过open()方法建立window对象实现弹出窗口外，还可以通过建立对话框的方式弹出窗口。
  如： 
    alert(""); //弹出信息提示对话框
    confirm(""); //弹出信息确认对话框
    prompt(""); //具有交互性质的对话框
  
  但是，上述实现的弹出窗口具有的功能较为单一，只能完成较为简单的功能。对于需要在对话框中显示多个数据信息，

甚至是HTML控件就无能为力了。

(3) 使用模态对话框实现复杂的对话框需求
在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容，
也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能。
包括创建模态对话框和非模态对话框两种。
    
实现方法为：

  //创建模态你对话框
  window.showModalDialog(sURL,vArguments,sFeatures)
 
 
  //创建非模态对话框
  window.showModelessDialog(sURL,vArguments,sFeatures)

其区别在于：

  用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时， 打开对话框

的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口URL改变时，它自动关闭。而模态［IE4］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。showModeDialog()则不然。

参数说明：

 sURL：必选参数，类型：字符串。
 
 用来指定对话框要显示的文档的URL。
 
 vArguments：可选参数，类型：变体。
 
 用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
 
 sFeatures：选参数，类型：字符串。

 用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
  
  dialogHeight：对话框高度

  不小于100px，IE4中dialogHeight和dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
 　　
  dialogWidth: 对话框宽度。
 　
  dialogLeft: 距离桌面左的距离。
 　　
  dialogTop: 离桌面上的距离。
 　
  center: 窗口是否居中
  
  默认yes，但仍可以指定高度和宽度,取值范围{yes | no | 1 | 0 }。
 　　
  help: 是否显示帮助按钮

  默认yes，取值范围 {yes | no | 1 | 0 }。

　resizable: 是否可被改变大小。
  
  默认no，取值范围 {yes | no | 1 | 0 } ［IE5+］。

　status: 是否显示状态栏。
  
  默认为yes[ Modeless]或no[Modal]，

  取值范围{yes | no | 1 | 0 } ［IE5+］。

  scroll:指明对话框是否显示滚动条。

  默认为yes，取值范围{ yes | no | 1 | 0 | on | off }。

  还有几个属性是用在HTA中的，在一般的网页中一般不使用。
  
  dialogHide:在打印或者打印预览时对话框是否隐藏。
  
  默认为no，取值范围{ yes | no | 1 | 0 | on | off }。

  edge:指明对话框的边框样式。
  
  默认为raised，取值范围{ sunken | raised }。
  
  unadorned:默认为no，取值范围{ yes | no | 1 | 0 | on | off }。

 传入参数：

 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象

例如：

var newWin=window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,

dialogWidth:300px, status:0, edge:sunken');

newWin.open();

与使用window.open()方法创建窗口相比，模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口.

 
2、子窗口与父窗口间通信

(1) 使用window.open()创建的窗口与父窗口通信
可以在子窗口页面中通过window.opener来获取父窗口对象，获取之后子窗口便可以对父窗口执行刷新，传值等操作。
 如：
   window.opener.location.reload(); //子窗口刷新父窗口
   window.opener.location.href //获取父窗口href
   window.opener.locaiton.pathname //获取父窗口路径名

   //刷新父页面
   window.location.href=window.location.href ; //重新定位父页面
   window.location.reload;

(2) 模态窗口与父窗口通信
通过使用showModelDialog(),及showModelessDialog（）方法创建的子窗口想与父窗口通信时，不能通过window.opener 来获取父窗口对象。

要实现通信，必须在创建模态子窗口时向子窗口传入父窗口对象。

实现方式为：

在父窗口中：

 var newWin=window.showModelDialog(url,window,'');
 此时参数window即是父窗口对象

在子窗口中：

需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建
子窗口时通过传入参数的方式传入的，因此，在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。

获取方式如下：

 var parent=widnow.dialogArguments；
变量parent便是父窗口对象。

例如：

//通过子窗口提交父窗口中的表单：form1,提交后执行查询操作
  var parent=window.dialogArguments;
  parent.document.form1.action="QueryInfor.jsp";
  parent.submit();

//刷新父页面
  var parent=window.dialogArguments;
  parent.location.reload();

//从子窗口传值到父窗口
要实现在模态子窗口中传值到父窗口，需要使用window.returnValue完成

实现方法如下：

在子窗口中：

//获取父窗口某字段值，对该值加一后返回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1；

//传回x值
window.returnValue=x;

在父窗口中：

//获取来自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
  document.getElementById("age").value=newWin;

//在子窗口中设置父窗口的值
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定，因为如果使用了不切实际的方法不仅降低开发效率，也降低了执行效率，往往也会造成不优雅的实现方式和代码风格。

子窗口设置父窗口的值使用方法如下：

子窗口中：

var parent=window.dialogArguments;
var x=parent.document.getElementById("age").value;
x=x+1；
//设置父窗口中age属性值
parent.document.getElementById("age").value=x;

以上是我在项目中使用javascript解决子窗口问题时，收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的（这主要与项目本身有关），不过其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时虽然在实现方法上有很大的差别，初次接触会觉得有点乱，但只要理清子窗口与父窗口之间的关系和角色之后，就很好理解了。

子窗口刷新父窗口注意的事项

 

 

主要是两个问题，一是子窗口如何刷新父窗口，二是窗口的参数问题。

    1 子窗口刷新父窗口

    如果是window.open();问题就好办，直接用window.opener.location.reload();就搞定了

    但是如果是window.showModalDialog(),它里面是没有window.opener的，不能用opener引用父窗口，直接调用用报错。

    总结了一下有两种方法可以解决，一是在子窗口中刷新父窗口，二是在子窗口关闭后，父窗口自己刷新。

   (1)在子窗口中刷新父窗口

       父窗口： 因为子窗口不能直接引用父窗口，所以需要父窗口主动传递指针变量，就是window.showModalDialog的第二个参数，参数为“window”,

    示例：

    var returnValue = window.showModalDialog(url,window,"dialogHeight=350px;dialogWidth=400px;center=yes;status=no;scroll=no;resizable=yes")；

    注意：window不要加引号。

    子窗口：执行完操作后调用window.dialogArguments.location.reload();

    网上说只调用这一句就可以了，但试了不行，具体原因没查到，自己猜测要这么用，父窗口必须是iframe. 如果父窗口不是iframe，想要实现这个功能，还可以在body中加入"onUnload=window.dialogArguments.location.reload()" ，这样子窗口关闭时就可以刷新父窗口了。

    (2)在父窗口中刷新自己

    这个实现比较简单，在子窗口关闭后，父窗口自己刷新，例如:

    var returnValue = window.showModalDialog(url,window,"dialogHeight=350px;dialogWidth=400px;center=yes;status=no;scroll=no;resizable=yes");
        if(returnValue != null){
            window.location.reload();
        }

    还有一种方法就是在子窗口中调用父窗口的一个方法，该方法自己刷新本页面（父窗口）；

    子窗口：window.dialogArgument.reloadPage();window.close;

    父窗口: function reloadPage（）{window.location.reload();}

    但是，试验后不行，能调用到这个方法，但是就是不刷新，原因不详。

    2 showModalDialog参数问题

    vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]);

    第三个参数用来描述对话框的外观等信息，我调整了半天都不见效，后来发现原因出现在两个地方：

    (1)长度，宽度，都是用 dialogHeight， dialogWidth表示，而不是heigh,width，和window.open()是不同的。

    (2)多个参数用";"分割，而不是用","。

 

父窗口

 

<script type="text/javascript" language="javascript">
	    function check(){
	         var url = "child.jsp";
	         //模态窗口
	         var newWin = window.showModalDialog(url,window,'dialogHeight:500px, dialogLeft:100px, dialogTop:100px,dialogWidth:300px, center:yes, status:0, edge:sunken');
              alert("3."+newWin);   
             if(newWin != null){
                alert("4."+newWin); 
                document.getElementById("tex").value = newWin;
                
                //窗口刷新
                //window.location.reload();
	       }       
	    }
	</script>
<input type="text" id="tex" name="tex"/>
     <input type = "button" id="parent" name="parent" value="父窗口" onclick="return check();"/>

 

子窗口

 

<script type="text/javascript" language="javascript">
        function parentValues(){
            //取到父窗口对象 parent
            var parent = window.dialogArguments;
            //取到父窗口中的 某些值
            var val = parent.document.getElementById("parent").value;
            alert("1."+val);
            var va = "子窗口";
            //向父窗口传值
            window.returnValue = va;
            alert("2."+va);
            
            //window.dialogArguments.location.reload();
            //关闭子窗口
            window.close();
        }
    </script>
<body onload="parentValues()" ><!-- onUnload="window.dialogArguments.location.reload()" -->
    子窗口向父窗口传值 <br/>
  </body>