`

关于父窗口与子窗口的数据传递问题汇总

阅读更多
曾经有那么一道题目是关于父窗口与子窗口的数据传递问题.我当时只知道父窗口向子窗口传递数据.不知道子窗口怎么向父窗口传递数据.今天终于把这个问题解决了,呵呵,记录一下:

我权且把原始窗口叫父窗口,把从该窗口打开或弹出的窗口或对话框叫子窗口.当然打开子窗口可用window.open()或window.showModalDialog()[与window.showModelessDialog()类似].若想将父窗口的数据传递到子窗口可用URL后带请求字符串即"?id1=qurey1&id2=query2",在子窗口中用window.location.search来获取该请求字符串.再利用字符串分割便可获得数据.

下面通过例子来说一下,子窗口向父窗口传递数据.首先是使用window.open()方法打开的窗口.
主窗口中主要是


<scrīpt type="text/Javascrīpt">
<!--
function MM_openSubWin(theURL,winName,features)
{
  window.open(theURL,winName,features);
}
//-->
</scrīpt>

<form name="form1" id="form1">
<table width=300" border="0" align="center" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100">测试输入框</td>
<td ><input name="to_mobile" type="text" id="to_mobile" value="" size="20" maxlength="11"> </td>
</tr>
<tr>
<td height="20" colspan="2">
<a href="#" ōnClick="MM_openSubWin('subwin.htm','测试子窗口1','width=450,height=300')"><font color="#FF6600">测试子窗口1</font></a>
</td>
</tr>
</table> 
</form>



这里主要有个window.open().它很简单,有三个主要参数,第一个是打开子窗口的URL;第二个是打开子窗口的名字,可选;第三个是设置大小,工具条等,可选.

子窗口中代码主要是


<scrīpt type="text/Javascrīpt">
<!--
function ConfirmSelection_onclick()
{
  var strCallNumbers = new String();
  strCallNumbers = document.form2.mobile.value;
window.parent.opener.document.form1.to_mobile.value = strCallNumbers;
}
//-->
</scrīpt>

<table width="300" height="26" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100">测试数据输入</td>
<td >  <input name="mobile" type="text" id="mobile" value="" size="20" maxlength="11">
</td>
</tr>
<tr>
<td height="12" colspan="3" bgcolor="#FFFFFF">
  <input type="submit" value="确定1" id="ConfirmSelection" name="ConfirmSelection" ōnclick="ConfirmSelection_onclick();window.close();">
  </td>
</tr>

</table>
</form>



这里主要是window.parent.opener,parent获取对象层次中的父窗口;opener设置或获取创建当前窗口的窗口的引用.使用它就可以对父窗口进行传值.

第二种方法是使用弹出对话框来实现.父窗口的代码主要有:

<form name="form1" id="form1">
<table width=300" border="0" align="center" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100">测试输入框</td>
<td ><input name="to_mobile" type="text" id="to_mobile" value="" size="20" maxlength="11"> </td>
</tr>
<tr>
<td height="20" colspan="2">
<input type="button" value="测试子窗口2" class="btn01" id="verifyButton" onclick="showSubWin();"></input></a>
</td>
</tr>
</table> 
</form>
<script>

function showSubWin(){
window.showModelessDialog('2.htm',window,'');
}

</script>


这里主要涉及window.showModalDialog()和window.showModelessDialog().二者的功能类似,都是打开指定的对话框,主要区别是:
  showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。
 showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响.
注意为了省事,传递变量名时直接将"window"传递过去,即showModalDialog("URL",window,"")

而子窗口对话框代码主要是


<form name="form2" id="form2">
<table width="300" height="26" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100">测试数据输入</td>
<td >  <input name="mobile" type="text" id="mobile" value="" size="20" maxlength="11">
</td>
</tr>
<tr>
<td height="12" colspan="3" bgcolor="#FFFFFF">
  <input type="submit" value="确定2" id="ConfirmSelection2" name="ConfirmSelection2" onclick="firmSelection_onclick2();">
</td>
</tr>

</table>
</form>
<script>
function firmSelection_onclick2(){
  strCallNumbers = document.form2.mobile.value;
window.dialogArguments.document.form1.to_mobile.value = strCallNumbers;
window.close();
}
</script>



你如果不想要对话框链接时不弹出新窗口就在<head />中添加<base target="_self">代码.这里传递数据用到了window.dialogArguments,它用来设置或获取传递给模式对话框窗口的变量或变量数组
分享到:
评论

相关推荐

    [C# 窗体间传值_共6种方法_低中高级实现方法

    父窗口可以通过创建子窗口的实例并调用其公开的方法来传递数据。这种方法虽然简单,但同样存在耦合问题,因为父窗口需要知道子窗口的具体实现细节。 3. **窗体间传值03:委托方式** (一般级别) 委托是C#中的一种...

    面试题汇总

    - parent:子窗口访问父窗口。 - opener:父窗口引用子窗口。 - top:顶级窗口引用,常用于框架页面。 9. **反射** - 动态获取和操作.NET类型、成员、构造函数等,支持运行时类型检查和对象创建。 - 主要类:...

    利用JQuery操作iframe父页面、子页面的元素和方法汇总

    接下来是关于在JQuery中和JavaScript中,如何在父页面与子页面间进行元素的互相操作: 1. **jQuery 在iframe子页面获取父页面元素**: ```javascript $("#objid", parent.document) ``` 使用`parent.document`...

    oracle层次汇总存储过程

    5. **调用与执行**:在应用层,我们可以调用这个存储过程,传递必要的参数,然后处理返回的结果集。这样可以将复杂的层级计算逻辑封装起来,提高代码的可读性和可维护性。 6. **性能优化**:处理层级数据时,性能...

    狐表(FoxTable)从入门到精通图文教程

    - **双向生成的优势**: 双向关联可以更灵活地在表之间传递数据。 - **双向生成的劣势**: 同时也存在可能导致数据冗余等问题。 - **多级关联**: 实现多张表之间的关联,形成复杂的数据结构。 - **关联表默认位置**: ...

    JavaScript弹出窗口方法汇总

    其中pageURL是子窗口的路径,name是子窗口的句柄,parameters是窗口参数。参数用逗号分隔,指定窗口的各种属性,例如窗口大小、位置、是否显示工具条等。 常见的窗口参数包括: - height和width:分别设置窗口的...

    计算机词汇

    绑定是指将数据源与用户界面元素相关联的过程,使得用户界面能自动反映数据源的变化。 **bit 数据类型 (bit Data Type)** bit 数据类型是一种用于存储单个二进制位的数据类型,通常用于表示布尔值。 **按位运算 ...

    Android技术面试整理附有详细答案

    - **RelativeLayout**:相对布局根据子视图间的相对位置或相对于父视图的位置来排列子视图。 - **TableLayout**:表格布局创建行和列的网格,适合于表格数据的显示。 - **ConstraintLayout**:约束布局允许子视图...

    C# 常用单词汇总,常用单词汇总

    - **定义**: 用户与程序之间交互的窗口。 - **应用场景**: 提供额外信息或请求用户确认。 #### 51. directory (目录) - **定义**: 文件系统的组织结构,用于存放文件或子目录。 - **应用场景**: 文件操作中,创建、...

    浏览器兼容性问题大汇总

    子窗口向父窗口传递参数,使用`window.opener`,如`parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";` 7. **父元素的区别**:IE使用`obj.parentElement`,Firefox使用`obj....

    JavaScript跨域方法汇总

    可以通过IFrame的`window.postMessage`方法实现父页面与子页面之间的通信,或者通过IFrame的`src`属性改变实现数据传递。但这种方法可能受到数据大小和安全性限制。 3. **JSONP(JSON with Padding)**:通过动态...

    strace-4.11源码.7z(普通资源,通通5币)

    3. 信号处理:源码中关于信号的部分展示了如何捕获、过滤和传递信号,以及如何将这些信号的处理集成到系统调用跟踪中。 4. 输出格式化:strace输出的信息可以按照不同的格式呈现,源码中这部分代码处理了时间戳、...

    JAVA入门1.2.3:一个老鸟的JAVA学习心得 PART1(共3个)

    10.2.1 父随子行 251 10.2.2 当构造方法遇到继承 254 10.2.3 记得给类一个无参数的构造方法 255 10.2.4 调用父类中的构造方法 256 10.2.5 对象也会“变脸” 258 10.2.6 遵守语法,正确“变脸” 262 10.3 覆盖...

    Java入门1·2·3:一个老鸟的Java学习心得.PART3(共3个)

    10.2.1 父随子行 251 10.2.2 当构造方法遇到继承 254 10.2.3 记得给类一个无参数的构造方法 255 10.2.4 调用父类中的构造方法 256 10.2.5 对象也会“变脸” 258 10.2.6 遵守语法,正确“变脸” 262 10.3 覆盖...

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

    多态允许我们将父对象设置为子对象的引用,这样就可以通过父对象调用子对象的方法,而具体的执行过程则由子对象决定。这种能力使得代码更加灵活,可以处理不同类型的对象,同时隐藏了对象的具体实现细节。 1. 客户/...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    10.9.2 单个表中的父/子视图 10.9.3 使用查找表编辑字段 10.9.4 处理来自数据库的图片 10.9.5 探测并发冲突 10.10 总结 第11章 缓存和异步页面 11.1 理解ASP.NET缓存 11.2 输出缓存 11.2.1 声明性...

Global site tag (gtag.js) - Google Analytics