js子父窗口相互通信

最近用公司的开发的产品进行二次开发时所用到大量的js代码。 所以我就列举今天其中一次所写的问题。子父窗口相互传值的问题。是由我平时所积累的经验和结合网上的例子所进行开发的一个例子。

子窗口建立及子父窗口的相互通信

1. window.open();

是window对象所进行的open方法,原意为：window.open(url,name,parame);

url：一个新的窗口的名称，或者窗口的路径名称，如果为空则不打开页面。

name: 新窗口的名称。相当与<a href="" targer=""></a> target的属性

parame:子窗口的属性的值，参数说明如下：

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. 还可建立在建立对话框的方式弹出窗口。

alert(""); //弹出信息提示对话框

confirm(""); //弹出信息确认对话框

prompt(""); //具有交互性质的对话框

这个只能显示简单的功能。

3. 建立模态框,即创建对话框的形式来创建窗口所完成的对象的功能

window.showModalDialog(url,vArguments,fearute) //创建对话框

window.showModelessDialog(url,vArguments,fearute) //创建非模态对话框

两者的区别在于：

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

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

参数说明：

url：必选参数，类型：字符串。用来指定对话框要显示的文档的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()方法创建窗口相比，模态方法创建窗口的区别在于有模态方法创建的窗口后将不能操作父窗口.

子父窗口的通信

通过window.open()来创建对象。 通过window.opener或者 window.top来操作父窗口的对象

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

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

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

//刷新父页面

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

window.location.reload;

window.top.document.xxx.all.innterText=ss;//子窗口返回ss的值到父窗口为xxx的name名称

window.top.close(); //关闭页面

模态框与父窗口间的通信。

模态框showModelDialog() 与非模态框showModelessDialog() 是不能通过window.parent.或者window.top来取的。如果要实现通信必须建立子父窗口间的相互通信。则在窗口中获取父窗口的对象。

父窗口：

//var newWin=window.showModelDialog(url,window,'');

newWin.open();

子窗口:

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

//从子窗口传值到父窗口

要实现在模态子窗口中传值到父窗口，需要使用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.getElementByIdx_x("age").value=newWin;

这些是我来自网上以及自己开发中所需的一些经验。 代码我就不发来让大家参考了。 希望会对你有所帮助。谢谢。