js总结：子窗口创建及父窗口与子窗口之间通信

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,'');

newWin.open();

此时参数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;

//在子窗口中设置父窗口的值

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

1、Javascript弹出子窗口

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

子窗口中：

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()进行传参等操作时虽然在实现方法上有很大的差别，初次接触会觉得有点乱，但只要理清子窗口与父窗口之间的关系和角色之后，就很好理解了。

 

JavaScrip高级应用：操作模态与非模态对话框　2008-08-08 09:20

分类：JavaScript

字号： 大大 中中 小小

 

 

我们知道，对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文介绍如何使用JavaScript语言来创建这两种类型的对话框、控制其大小和位置、改变其外观以及在对话框间的数据传递。

本文的所有例程中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。

一、创建模态和非模态对话框

首先，我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中，我们输入以下代码：

<INPUT TYPE="button" VALUE="创建模态对话框" οnclick="fnOpenModal()">

<br><br>

<INPUT TYPE="button" VALUE="创建非模态对话框" οnclick="fnOpenModeless()">

<script language="javascript">

function fnOpenModal(){

window.showModalDialog("callee.htm")

}

function fnOpenModeless(){

window.showModelessDialog("callee.htm")

}

</script>

在浏览器中打开caller.htm，点击“创建模态对话框”按钮，将会出现一个对话框窗口，其中的内容是callee.htm。你会看到，除了关闭这个新窗口，无论怎样我们也不能将其他的窗口设置为“当前活动”窗口，这个一直是活动状态的窗口类型就是模态类型。关闭这个模态对话框，回到caller.htm页面，点击“创建非模态对话框”，出现一个包含callee.htm页面的对话框窗口。这回有所不同，鼠标可以转移到其他地方使另外的窗口成为“当前活动”状态，这就是非模态的概念。

接下来，我们看看创建模态对话框与非模态对话框的相关语法：

创建模态对话框：

vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]);

创建非模态对话框：

vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);

从上面的语法我们得知：除了名字有所区别外，参数种类与含义都相同。以下是各参数的含义：

· VReturnValue：对于showModalDialog()，它表示被打开的对话框窗口设置的returnValue属性值。对于showModelessDialog()，它表示新窗口对象。

· VFreeArgument：这个参数可用于传递某种类型的数据到打开的对话框，数据可以是一个数值、字符串、数组或者一个对象类型。在新窗口中引用这个数值时，可通过新创建window对象的dialogArguments 属性。

· SOrnaments：用这个参数指定新窗口的外观。可选择的窗口属性有很多种，当有多种控制需求时，将相关内容用一个字符串连接起来，其间用分号隔开。以下是可选择的属性种类：

o dialogHeight: sHeight

o dialogLeft: sXpos

o dialogTop: sYpos

o dialogWidth: sWidth

o center: ( yes | no | 1 | 0 | on | off )

o dialogHide: ( yes | no | 1 | 0 | on | off )

o edge: ( sunken | raised )

o help: ( yes | no | 1 | 0 | on | off )

o resizable: ( yes | no | 1 | 0 | on | off )

o scroll: ( yes | no | 1 | 0 | on | off )

o status: ( yes | no | 1 | 0 | on | off )

除了以上属性外，我们还可以加入更加丰富的CSS控制。 以下我们来详细解释如何应用这些属性。

二、控制对话框大小和位置

控制对话框的大小和位置涉及到5个方面：高度（dialogHeight）、宽度（dialogWidth）、相对于桌面左上角的x坐标（dialogLeft）、y坐标（dialogTop）以及是否让对话框窗口居中（center）。由于不同版本的Internet Explorer浏览器处理的默认度量单位并非一致，所以我们在指定高度、宽度等大小时，最好是同时设置好单位。单位种类包括很多，比如cm、mm、in、pt、pc、px。请注意：最小的高度值是100px。

下面的代码将打开一个高200px、宽800px的对话框：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');

我们注意到，打开的新窗口会在桌面中处于居中的位置，这也正是居中属性（center）的默认值。居中属性（center）的可取值包括yes、no、1、0、on和off，含义一目了然。执行以下代码，看看关闭居中属性后新窗口的位置：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no');

我们看到，新窗口紧挨者桌面的左上角打开。当然，我们可以使用dialogLeft和dialogTop 属性来精确定义新窗口的打开位置。下面的代码将在相对于桌面左上角的x位置300px和y位置500px处打开新窗口：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;   dialogTop:500')

注意，即使指定了居中属性，但如果同时设置了dialogLeft和dialogTop属性值，那么窗口位置将遵从后者。试一试执行下面的代码：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;   dialogTop:500;center:yes')

三、改变对话框外观

对话框的外观控制包括从窗口边缘风格（edge）、是否存在滚动条（scroll）、是否包含上下文关联提示图标（help）、是否显示状态栏（status）以及是否可以改变窗口大小（resizable）等方面。默认情况下，新打开的窗口是大小不可改变的、边缘风格为凸起、在新窗口右上角显示一个上下文关联提示图标、存在滚动条，比如：

edge的可取值为sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含义一目了然。

下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷：

showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");

执行后，图示如下：

四、从caller页面传递数据到callee页面

上面我们介绍了创建模态和非模态窗口的语法以及如何控制新窗口的大小、位置和外观，接下来我们研究一下实际应用中更实用的功能：如何从caller页面传递数据到callee页面。

从caller页面传递给callee页面的数据分为3类：传递值、传递数组引用以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。

（一）传递值类型数据

在caller.htm页面中输入以下代码：

<INPUT TYPE="button" VALUE="创建模态对话框" οnclick="fnOpenModal()">

<br><br>

<INPUT TYPE="button" VALUE="创建非模态对话框" οnclick="fnOpenModeless()">

<script language="javascript">

<!--

function fnOpenModal(){

window.showModalDialog("callee.htm","打开了一个新模态窗口")

}

function fnOpenModeless(){

window.showModelessDialog("callee.htm","打开了一个新非模态窗口")

}

// -->

</script>

在callee.htm页面中输入以下代码：

<SCRIPT LANGUAGE="JavaScript">

<!--

alert(dialogArguments);

// -->

</SCRIPT>

在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的提示信息框：

然后才出现新窗口。这种情况下，callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中的"打开了一个新模态窗口"或者"打开了一个新非模态窗口"。如果直接打开callee.htm，将会出现错误提示。

（二）传递数组引用类型数据

第一种值类型数据的传递中，在callee.htm页面中只能读取caller.htm页面的传递数据。当需要对caller.htm页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。

首先，在caller.htm页面中输入以下代码：

<INPUT TYPE="button" VALUE="创建模态对话框" οnclick="fnOpenModal()">

<br><br>

<INPUT TYPE="button" VALUE="创建非模态对话框" οnclick="fnOpenModeless()">

<script language="javascript">

<!--

var a = new Array;

a[0]="first";

a[1]="second";

a[2]="third";

function fnOpenModal(){

window.showModalDialog("callee.htm",a)

}

function fnOpenModeless(){

window.showModelessDialog("callee.htm",a)

}

// -->

</script>

然后在callee.htm页面中输入以下代码：

<SCRIPT LANGUAGE="JavaScript">

<!--

a = dialogArguments;

alert(a);

a[0] = "fourth";

// -->

</SCRIPT>

最后，在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的对话框：

接着关闭这个对话框以及新打开的窗口，再次点击一个按钮，又出现一个对话框：

从运行结果我们看到，在caller.htm页面中通过对数组a的地址引用，就可以实现在callee.htm中修改数组a的内容。

注意在callee.htm中要首先建立对传递数据的附值：a = dialogArguments。

（三）传递对象类型数据

在caller.htm和callee.htm中传递数据的最有效方式是通过对象方式进行，这不仅能实现从caller.htm到callee.htm的传递，还能从callee.htm传递到caller.htm。而且，我们还可以在caller.htm中定义对象的方法，再在callee.htm中使用它们。实际上，我们可以将caller.htm的window对象传递给callee.htm，这样就可以在callee.htm中访问caller.htm的变量及函数。

来看看一个实际的例子。在caller.htm中输入以下代码：

<HTML>

<HEAD>

<TITLE>传递对象数据</TITLE>

<SCRIPT>

var sColor="";

function callDialog() {

showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");

}

function update()

{

oColor.innerText = sColor;

}

</SCRIPT>

</HEAD>

<BODY>

<P>输入你最喜欢的颜色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>

<INPUT TYPE="button" VALUE="Display Modeless Dialog" οnclick="callDialog()">

</BODY>

</HTML>

在callee.htm中输入以下代码：

<HTML>

<HEAD>

<TITLE>callee.html</TITLE>

<SCRIPT>

function getInfoAndUpdate() {

var callerWindowObj = dialogArguments;

callerWindowObj.sColor = oEnterColor.value;

callerWindowObj.update();

}

function cancel() {

var callerWindowObj = dialogArguments;

callerWindowObj.sColor = "Yellow";

callerWindowObj.update();

}

</SCRIPT>

</HEAD>

<BODY>

输入你最喜欢的颜色:<INPUT ID=oEnterColor><BR><BR>

<INPUT VALUE="Apply" TYPE=button οnclick="getInfoAndUpdate();">

<INPUT VALUE="Ok" TYPE=button οnclick="getInfoAndUpdate();window.close();">

<INPUT VALUE="Cancel" TYPE=button οnclick="cancel();window.close();">

</BODY>

</HTML>

在浏览器中打开caller.htm，点击“显示非模态对话框”按钮，出现新对话框：

在对话框中输入其他颜色名称，点击“Apply”按钮后，执行callee.htm中的getInfoAndUpdate函数：

function getInfoAndUpdate() {

var callerWindowObj = dialogArguments;

callerWindowObj.sColor = oEnterColor.value;

callerWindowObj.update();

}

因为在caller.htm中传递给callee.htm的是对象类型数据window，所以经过第一条语句的附值，callerWindowObj就指向了caller.htm页面，然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及函数：callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传递给caller.htm中的变量sColor，然后再执行caller.htm中的 update()函数更新显示信息。

可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂。

六、结 语

以上对使用JavaScript语言操作模态和非模态对话框进行了详细介绍，相信你又掌握了在html页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。