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

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

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

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

<scrīpt type="text/Javascrīpt">

</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">

</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" 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,它用来设置或获取传递给模式对话框窗口的变量或变量数组

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

热点推荐