当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript showModalDialog两个窗体之间传值

Javascript
javascript radio list的实现细节(多浏览器兼容)
IE在DOM操作有表单控件时的bug
trim原型函数看js正则表达式的性能
js 禁用浏览器的后退功能的简单方法
IE和Firefox下javascript的兼容写法小结
兼容ie和firefox js关闭代码
用tip解决Ext列宽度不够的问题
firefox getyear() getFullYear数获取年份的问题
javascript iFrame研究
FLASH 广告之外的链接
firefox TBODY 用js显示和隐藏时出现错位的解决方法
Javascript 获取LI里的内容
比较全的JS checkbox全选、取消全选、删除功能代码
JS checkbox控制操作代码
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
简单通用的JS滑动门代码
Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）
js 提交和设置表单的值
flash javascript之间的通讯方法小结

No. « 120 121 122 123 »

技术文章搜索

关键字

Javascript showModalDialog两个窗体之间传值

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-10   浏览: 443 ::
收藏到网摘: n/a

前一篇文章Javascript怎么在两个窗体之间传值中讲到了如何利用window.open()方法打开新窗体，并在两个窗体之间传值的方法。 Javascript 两个窗体之间传值实现代码
javascript中还有一个函数window.showModalDialog也可以打开一个新窗体，不过他打开的是一个模态窗口，那么如何在父窗体和子窗体之间传值呢？我们先看该函数的定义：vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
参数说明：
sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 离屏幕左的距离。
dialogTop: 离屏幕上的距离。
center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
如："dialogWidth=200px;dialogHeight=100px"
因此我们可以通过window.dialogArguments参数来在两个窗体之间传值
如下面两个页面：FatherPage.htm:
复制代码 代码如下:

<script type="text/javascript">
function OpenChildWindow()
{
window.showModalDialog('ChildPage.htm',document.getElementById('txtInput').value);
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

ChildPage.htm:
复制代码 代码如下:

<body onload="Load()">
<script type="text/javascript">
function Load()
{
document.getElementById('txtInput').value=window.dialogArguments ;
}
</script>
<input type="text" id="txtInput" />
</body>

上面只是传递简单的字符串，我们还可以传递数组，如：FatherPage.htm:
XML-Code:
复制代码 代码如下:

<script type="text/javascript">
function OpenChildWindow()
{
var args = new Array();
args[0] = document.getElementById('txtInput').value;
window.showModalDialog('ChildPage.htm',args);
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />ChildPage.htm:
XML-Code:
<script type="text/javascript">
function Load()
{
document.getElementById('txtInput').value=window.dialogArguments[0] ;
}
</script>

同样我们还可以传递对象，如：FatherPage.htm:
XML-Code:
复制代码 代码如下:

<script type="text/javascript">
function OpenChildWindow()
{
var obj = new Object();
obj.name = document.getElementById('txtInput').value;
window.showModalDialog('ChildPage.htm',obj);
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

ChildPage.html:
XML-Code:
复制代码 代码如下:

<script type="text/javascript">
function Load()
{
var obj = window.dialogArguments;
document.getElementById('txtInput').value=obj.name ;
}
</script>

以上都是从父窗体向子窗体传值，那么如何从子窗体向父窗体传值呢 ？其实通过window.returnValue就可以获取子窗体的值，window.returnValue与window.dialogArguments一样，可以是任意变量，包括字符串，数组，对象等。如：FatherPage.html:
XML-Code:
复制代码 代码如下:

<script type="text/javascript">
function OpenChildWindow()
{
var obj = new Object();
obj.name = document.getElementById('txtInput').value;
var result = window.showModalDialog('ChildPage.htm',obj);
document.getElementById('txtInput').value = result.name;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

ChildPage.html:
XML-Code:
复制代码 代码如下:

<body onload="Load()">
<script type="text/javascript">
function Load()
{
var obj = window.dialogArguments;
document.getElementById('txtInput').value=obj.name ;
}
function SetValue()
{
var obj = new Object();
obj.name = document.getElementById('txtInput').value;
window.returnValue = obj;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>