javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例

　　先简单介绍一下基本知识：

　　一、window.open()支持环境： Java1.0+/J1.0+/Nav2+/IE3+/Opera3+

　　二、基本语法：

　　window.open(pageURL,name,parameters)

　　其中：

　　pageURL 为子窗口路径

　　name 为子窗口句柄

　　parameters 为窗口参数(各参数用逗号分隔)

　　三、各项参数

　　其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。

　　参数 | 取值范围 | 说明

　　alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后

　　alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上

　　depended | yes/no | 是否和父窗口同时关闭

　　directories | yes/no | Nav2和3的目录栏是否可见

　　height | pixel value | 窗口高度

　　hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键

　　innerHeight | pixel value | 窗口中文档的像素高度

　　innerWidth | pixel value | 窗口中文档的像素宽度

　　location | yes/no | 位置栏是否可见

　　menubar | yes/no | 菜单栏是否可见

　　outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度

　　outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度

　　resizable | yes/no | 窗口大小是否可调整

　　screenX | pixel value | 窗口距屏幕左边界的像素长度

　　screenY | pixel value | 窗口距屏幕上边界的像素长度

　　scrollbars | yes/no | 窗口是否可有滚动栏

　　titlebar | yes/no | 窗口题目栏是否可见

　　toolbar | yes/no | 窗口工具栏是否可见

　　Width | pixel value | 窗口的像素宽度

　　z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

　　window.showModalDialog使用手册

　　基本介绍：

　　showModalDialog() (IE 4+ 支持)

　　showModelessDialog() (IE 5+ 支持)

　　window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

　　window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

　　使用方法：

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

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

　　参数说明：

　　sURL--

　　必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

　　vArguments--

　　可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

　　sFeatures--

　　可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

　　1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

　　2.dialogWidth: 对话框宽度。

　　3.dialogLeft: 离屏幕左的距离。

　　4.dialogTop: 离屏幕上的距离。

　　5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。

　　6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

　　7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。

　　8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

　　9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

　　下面几个属性是用在HTA中的，在一般的网页中一般不使用。

　　10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。

　　11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。

　　12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

　　参数传递：

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

　　-------------------------------

　　parent.htm

复制代码代码如下:

　　var obj = new Object();

　　obj.name="51js";

　　window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

　　</script>

　　modal.htm

复制代码代码如下:

　　var obj = window.dialogArguments

　　alert("您传递的参数为：" + obj.name)

　　</script>

　　-------------------------------

　　2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

　　------------------------------

　　parent.htm

复制代码代码如下:

　　< type="text/java">

　　str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");

　　alert(str);

　　</script>

　　modal.htm

复制代码代码如下:

　　window.returnValue="http://www.glzy8.com";

　　</script>

　　在IE中,我们可以使用showModalDialog来传值。

　　语法如下：

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

　　但是.在Firefox中却沒有showModalDialog方法，不过我们可以用window.open（）

　　语法如下：

　　oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

　　只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,而在FireFox下要让开启的视窗跟IE的showModalDialog一样的话,只要在sFeatures中加個modal=yes就可以了。

　　下面用一个示例来说明其用法。

　　功能说明：从子窗口中输入颜色种类提交到父窗口，并添加选项到下拉列表。

　　a.html

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>a.html文档</title>

　　function openstr()

　　{

　　ReturnValue=window.showModalDialog("b.html",window,"dialogWidth=510px;dialogHeight=150px;status=no");

　　if(ReturnValue && ReturnValue!="")

　　{

　　oOption = document.createElement('OPTION');

　　oOption.text=ReturnValue;

　　oOption.value=ReturnValue;

　　document.all.txtselect.add(oOption);

　　}

　　</script>

　　</head>

　　<body>

　　<label>

　　</select>

　　</label>

　　<label>

　　</label>

　　</form>

　　</body>

　　</html>

　　b.html

复制代码代码如下:

　　<html >

　　<head>

　　<title>b.html文档</title>

　　function ClickOk()

　　{

　　var t=document.Edit;

　　var url=t.color.value;

　　if(url==null||url=="填写颜色") return(false);

　　window.returnValue=url;

　　window.close();

　　}

　　</script>

　　</head>

　　<body>

　　<tr>

　　<td width="30" align="right" height="30">color:</td>

　　</tr>

　　</form>

　　</table>

　　</body>

　　</html>

　　修改为兼容IE和FireFoxr的代码如下：

　　[code]

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>a.html文档</title>

　　function openstr()

　　{

　　window.open("b.html","","modal=yes,width=500,height=500,resizable=no,scrollbars=no");

　　}

　　</script>

　　</head>

　　<body>

　　<label>

　　</select>

　　</label>

　　<label>

　　</label>

　　</form>

　　</body>

　　</html>

　　b.html

复制代码代码如下:

　　<html >

　　<head>

　　<title>b.html文档</title>

　　function ClickOk()

　　{

　　var t=document.Edit;

　　var color=t.color.value;

　　if(color==null||color=="填写颜色") return(false);

　　var oOption = window.opener.document.createElement('OPTION');

　　oOption.text=url;

　　oOption.value=url;

　　//检查浏览器类型

　　var bname = navigator.appName;

　　if (bname.search(/netscape/i) == 0)

　　{

　　window.opener.document.getElementById("txtselect").appendChild(oOption);

　　}

　　else if (bname.search(/microsoft/i) == 0)

　　{

　　window.opener.document.all.txtselect.add(oOption);

　　}

　　else

　　{

　　}

　　window.close();

　　}

　　</script>

　　</head>

　　<body>

　　<tr>

　　<td width="30" align="right" height="30">color:</td>

　　</tr>

　　</form>

　　</table>

　　</body>

　　</html>

　　下面是网上的朋友发布一篇测试代码，大家可以测试下。

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　</head>

<script type="text/javascript"><!--

　　//传数组

　　function check(){

　　var mxh1 = new Array("mxh","net_lover","孟子E章")

　　window.showModalDialog("test.html",mxh1,"unadorned:0;scroll:0;status:false;dialogWidth:380px;dialogHeight:200px");

　　}

　　//传对象

　　function check1(){

　　var obj = new Object();

　　obj.name="zhangsan";

　　obj.age=2;

　　obj.sex="男";

　　window.showModalDialog("aaa.html",obj,"unadorned:0;scroll:0;status:false;dialogWidth:380px;dialogHeight:200px");

　　}

　　// --></script>

　　</body>

　　</html>

　　test.html 源代码:

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>获得主页面的值</title>

　　</head>

　　<body>

script type="text/javascript"><!--

　　//传数组方式

　　//var test = dialogArguments;

　　//alert(test[0]);

　　//alert(test[1]);

　　//alert(test[2]);

　　//传对象方式

　　var obj = dialogArguments;

　　alert(obj.name);

　　alert(obj.age);

　　alert(obj.sex);

　　// --></script>

　　</body>

　　</html>

　　showModalDialog 传值及刷新

　　showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.

　　farther.html

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE>New Document </TITLE>

<!--

　　function openChild(){

　　var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");

　　if(k != null)

　　document.getElementById("txt11").value = k;

　　}

　　//-->

　　</script>

　　</HEAD>

　　<BODY>

　　<br>

　　传递到父窗口的值:<input id="txt9" type="text" value="3333333333333" name="txt9"><br>

　　返回的值:<input id="txt11" type="text" name="txt11"><br>

　　子窗口设置的值:<input id="txt10" type="text" name="txt10"><br>

　　</BODY>

　　</HTML>

　　child.html

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE>New Document </TITLE>

　　</HEAD>

　　<BODY>

　　<br>

　　父窗口传递来的值:<input id="txt0" type="text" name="txt0"><br>

　　输入要设置父窗口的值:<input id="txt1" type="text" name="txt1"><input id="Button1" onclick="setFather()" type="button" value="设置父窗口的值" name="Button1"><br>

　　输入返回的值:<input id="txt2" type="text" name="txt2"><input id="Button2" onclick="retrunValue()" type="button" value="关闭切返回值" name="Button2">

<!--

　　var k=window.dialogArguments;

　　//获得父窗口传递来的值

　　if(k!=null)

　　{

　　document.getElementById("txt0").value = k.document.getElementById("txt9").value;

　　}

　　//设置父窗口的值

　　function setFather()

　　{

　　k.document.getElementById("txt10").value = document.getElementById("txt1").value

　　}

　　//设置返回到父窗口的值

　　function retrunValue()

　　{

　　var s = document.getElementById("txt2").value;

　　window.returnValue=s;

　　window.close();

　　}

　　//-->

　　</script>

　　</BODY>

　　</HTML>

　　说明:

　　由于showModalDialog缓存严重,下面是在子窗口取消客户端缓存的设置.也可以在服务器端取消缓存,参考:

　　管理资源吧的下一篇文章。

　　(二)下面是关闭刷新父窗口的例子

　　farther.html

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE>New Document </TITLE>

<!--

　　function openChild()

　　{

　　var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");

　　if(k == 1)//判断是否刷新

　　{

　　alert('刷新');

　　window.location.reload();

　　}

　　//-->

　　</script>

　　</HEAD>

　　<BODY>

　　<br>

　　传递到父窗口的值:<input id="txt9" type="text" value="3333333333333" NAME="txt9"><br>

　　</BODY>

　　</HTML>

　　child.html

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>

　　<HEAD>

　　<TITLE>New Document </TITLE>

　　</HEAD>

　　<BODY>

　　<br>

　　父窗口传递来的值:<input id="txt0" type="text" name="txt0"><br>

<!--

　　var k=window.dialogArguments;

　　//获得父窗口传递来的值

　　if(k!=null)

　　{

　　document.getElementById("txt0").value = k.document.getElementById("txt9").value;

　　}

　　//关闭窗口返回是否刷新的参数.

　　function winClose(isRefrash)

　　{

　　window.returnValue=isRefrash;

　　window.close();

　　}

　　//-->

　　</script>

　　</BODY>

　　</HTML>

　　说明

　　1.下面是取消客户端缓存的:

　　也可以在服务器端取消缓存,参考管理资源吧下一篇文章

　　2.向父窗口传递阐述在ASP.NET中也可以是用aaa.aspx?id=1的方式传递.

　　3.不刷新父窗口的话在父窗口中直接这样一来设置可以.

　　window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");

　　</script>

　　4.在子窗口中若要提交页面的话要加入:,这样就不会打开新窗口了.

　　<head>

　　</HEAD>

教程首页更多教程