曾经有那么一道题目是关于父窗口与子窗口的数据传递问题.我当时只知道父窗口向子窗口传递数据.不知道子窗口怎么向父窗口传递数据.今天终于把这个问题解决了,呵呵,记录一下:
我权且把原始窗口叫父窗口,把从该窗口打开或弹出的窗口或对话框叫子窗口.当然打开子窗口可用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设置或获取创建当前窗口的窗口的引用.使用它就可以对父窗口进行传值.
第二种方法是使用弹出对话框来实现.父窗口的代码主要有:
|
<scrīpt type="text/Javascrīpt">
<!--
function MM_showSubWin(theURL,varName,features)
{
//window.showModalDialog(theURL,varName,features);
window.showModelessDialog(theURL,varName,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_showSubWin('subwin.htm',window,'')"><font color="#FF6600">测试子窗口2</font></a>
</td>
</tr>
</table>
</form>
|
这里主要涉及window.showModalDialog()和window.showModelessDialog().二者的功能类似,都是打开指定的对话框,主要区别是:
showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响.
注意为了省事,传递变量名时直接将"window"传递过去,即showModalDialog("URL",window,"")
而子窗口对话框代码主要是
|
<scrīpt type="text/Javascrīpt">
<!--
function ConfirmSelection_onclick2()
{
var strCallNumbers = new String();
strCallNumbers = document.form2.mobile.value;
window.dialogArguments.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="确定2" id="ConfirmSelection2" name="ConfirmSelection2" ōnclick="ConfirmSelection_onclick2();window.close();"> </td>
</tr>
</table>
</form>
|
你如果不想要对话框链接时不弹出新窗口就在<head />中添加<base target="_self">代码.这里传递数据用到了window.dialogArguments,它用来设置或获取传递给模式对话框窗口的变量或变量数组.