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

    Last modified：2013-10-10 17:44:34

    *********************************************

一，创建子窗口的方法：

    1，使用window.open()方法：

      window.open(URL,windowName,parameters);

    URL：要打开的连接

    WindowName：打开的子窗口的名字，如果为“_blank”效果和“a”标签里面target=”_blank”一样，打开一个新窗口

    Parameter：一些可定制的参数 （下面提供了DHTML文件可以查阅）

    e.g:

    打开一个 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

    使用window.showModalDialog()方法创建（showModelessDialog方法我试了一下就ie好使，google和firefox都不支持）

    window.showModalDialog(sURL,vArguments,sFeatures);

    参数说明：

     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个字符。也可以传递对象

e.g:

//打开一个对话框并将父类的应用传递给子窗体

window.showModalDialog(url,window.document);

 

 二，子父窗口间通信

    都可以使用window.opener引用到父窗口。

 如：

window.opener.location.reload(); //子窗口刷新父窗口

window.opener.location.href //获取父窗口href

window.opener.locaiton.pathname //获取父窗口路径名

            //刷新父页面 

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

      window.location.reload;

 

    使用showModelDialog打开的窗口，可以在打开子窗口的时候将父类的引用通过参数传递过去。

子窗口通过 var parent=widnow.dialogArguments；获取父类的引用。

    e.g:

    //通过子窗口提交父窗口中的表单：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;

    e.g：在子窗口中设置父窗口的值

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

    //子窗口中：

    var parent=window.dialogArguments;

    var x=parent.document.getElementById("age").value;

    x=x+1；

    //设置父窗口中age属性值

 

    parent.document.getElementById("age").value=x;

 

 记：为实现使用微博登录时弹出一个小窗口，使用showModelDialog打开一个子窗口的确挺好用，但是开发中发现有时会被浏览器拦截，不知道别人是怎么处理这问题的。纠结，最后没有采用弹窗方式而是采用了 window.location.href = URL;的方式。