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

Javascript
javascript innerText和innerHtml应用
图像替换新技术 状态域方法
JavaScript 判断判断某个对象是Object还是一个Array
Extjs 几个方法的讨论
JavaScript 学习笔记(十五)
javascript 匿名函数的理解(透彻版)
Jquery 常用方法经典总结
jquery 批量上传图片实现代码
javascript中的array数组使用技巧
详细讲解JS节点知识
javascript让setInteval里的函数参数中的this指向特定的对象
javaScript 关闭浏览器 (不弹出提示框)
对字符串进行HTML编码和解码的JavaScript函数
javascript 三种编解码方式
js左侧多级菜单动态的解决方案
JavaScript 学习笔记(十六) js事件
JavaScript面向对象之静态与非静态类
javascript两段代码,两个小技巧
js中鼠标滚轮事件详解(firefox多浏览器)
js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

Javascript showModalDialog两个窗体之间传值


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

前一篇文章Javascript怎么在两个窗体之间传值中讲到了如何利用window.open()方法打开新窗体,并在两个窗体之间传值的方法。 Javascript 两个窗体之间传值实现代码
javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:vReturnValue = 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 | 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>