`
Messi光明
  • 浏览: 55664 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript 两个窗体之间传值实现代码

阅读更多
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>

详细出处参考:http://www.jb51.net/article/20141.htm
分享到:
评论

相关推荐

    Javascript showModalDialog两个窗体之间传值

    Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...

    无刷新 子窗体传值父窗体

    总结来说,"无刷新子窗体传值父窗体"的技术实现涵盖了JavaScript事件、DOM操作、HTML5新特性、前端框架等多个方面,这些技术的应用能够提升Web应用的用户体验,使得页面交互更加流畅。在学习和实践中,理解并熟练...

    ASP.NET 窗体间传值的方法

    本篇将详细解释如何在ASP.NET的两个窗体之间进行值的传递。 首先,我们来看一个具体的例子。假设我们有两个窗体:ParentForm.aspx和SubForm.aspx。在ParentForm.aspx中,有一个TextBox1文本框和一个Open按钮。当...

    子窗体与父窗体传值示例js代码

    首先,我们需要理解两个概念:子窗体(Child Window)和父窗体(Parent Window)。子窗体通常是由父窗体通过`window.open()`或`window.showModalDialog()`方法打开的新窗口,而父窗体则是创建子窗体的那个原始窗口。...

    .NET中利用js让子窗体向父页面传值的实现方法.docx

    总结一下,.NET中利用JavaScript实现子窗体向父页面传值的步骤如下: 1. 在子页面C#后台中,创建一个方法,如`SetValueToParentPage`,生成JavaScript代码,将需要传递的值赋给`window.returnValue`,并关闭子窗口...

    ShowModalDialog父窗体向子窗体传值

    总的来说,`showModalDialog`和`showModelessDialog`是JavaScript中用于创建弹出式对话框的两种方式,它们提供了在父窗口与子窗口之间传递数据的机制,同时也能够定制对话框的外观和行为。在实际应用中,根据需求...

    javascript窗体模式

    窗体模式更进一步,涉及如何使用JavaScript来控制多个窗体的生命周期和它们之间的通信。 在两个页面间传值,JavaScript提供了多种方法。其中最常用的是利用URL查询字符串、存储机制(如localStorage或...

    模态窗口传值www.bbssa.com

    总结,实现模态窗口传值涉及HTML结构创建、JavaScript事件处理以及数据传递。通过理解这些基本概念,开发者可以创建更丰富的交互式网页应用。对于www.bbssa.com,如果它是与模态窗口技术相关的学习资源,那么深入...

    window.open父子窗口传值问题

    如果两个窗口属于不同的源(域名、协议或端口),则存在同源策略限制,这会阻止它们直接访问对方的DOM或JavaScript变量。 要解决父子窗口间的传值问题,有以下几种方法: 1. **使用URL参数**:在`window.open`的`...

    .NET中利用js让子窗体向父页面传值的实现方法

    这里有两个关键的函数:`OpenPerChoose`和`showPopWin`。 `OpenPerChoose`函数接收子页面的URL,宽度和高度参数,以及一个引用到父窗口的对象。它调用`showPopWin`函数打开子页面,并传递了一个回调函数`returnFunc...

    iframe父子传值

    同源策略规定,只有相同协议、域名和端口的两个页面才能相互访问彼此的DOM元素和JavaScript变量。因此,如果`iframe`的源URL与包含它的页面不同源,那么它们之间的通信就会受到限制。 ### 2. 父向子传值 #### 2.1 ...

    frameSet应用 子父窗口传值

    这里创建了一个两个相等高度的框架,顶部显示`top.html`,底部显示`bottom.html`。 ### 2. 子父窗口通信 在`frameSet`环境中,子窗口可以通过`window.parent`对象访问父窗口,实现数据传递。例如,假设有一个名为`...

    Hbuilder MUI 页面刷新及页面传值问题

    在HBuilder MUI框架中,实现页面之间的数据刷新是常见需求之一。以下将详细介绍如何通过MUI提供的API来完成这一功能。 ##### 1. 父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 **步骤1:父...

    亮剑.NET深入体验与实战精要2

    4.12.2 如何使一个窗体在屏幕的最顶端 194 4.12.3 实现窗体渐显效果 194 4.12.4 设置窗口背景为渐变色 195 4.12.5 模态窗口和非模态窗口 196 4.12.6 屏蔽窗口右上角的关闭 操作 196 4.12.7 调用执行外部的程序 197 ...

    亮剑.NET深入体验与实战精要3

    4.12.2 如何使一个窗体在屏幕的最顶端 194 4.12.3 实现窗体渐显效果 194 4.12.4 设置窗口背景为渐变色 195 4.12.5 模态窗口和非模态窗口 196 4.12.6 屏蔽窗口右上角的关闭 操作 196 4.12.7 调用执行外部的程序 197 ...

    2021-2022计算机二级等级考试试题及答案No.14057.docx

    13. JavaScript 数值比较:`Math.max(2, 4)` 返回两个数中的较大值。 14. Windows 窗体控件:设置 `BackStyle` 属性为 `0` 可使标签透出窗体背景。 15. Microsoft Office 组件:WPS 不属于 Microsoft Office 系列...

Global site tag (gtag.js) - Google Analytics