在html web網頁中父子視窗之間值的傳值
在Web開發中，常常要用到兩個視窗之間互相傳值。下面談談父子視窗之間的傳值：
一：使用Open開啟子視窗
1：單值傳遞
通過open開啟的子視窗比較好處理。
頁面視窗1.html程式碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
<input type="text" size="30" name="p" id="p" value=""/>
</form>
<a href="javascript:void(0)" onclick="window.open('2.html','child','width=400,height=300,left=200,top=200');">開啟子視窗</a>
</body>
</html>
Open後彈出的子視窗2.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_self">
<body>
<input type="button" onclick="JavaScript:window.opener.document.getElementById('p').value='ok';window.close();" value="確定">
</body>
2：多值傳遞
多值的值的傳遞與單值傳遞是一模一樣的。
頁面視窗1.html程式碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
<input type="text" size="30" name="p0" id="p0" value=""/><br />
<input type="text" size="30" name="p1" id="p1" value=""/>
</form>
<a href="javascript:void(0)" onclick="window.open('2.html','child','width=400,height=300,left=200,top=200');">開啟子視窗</a>
</body>
</html>
Open後彈出的子視窗2.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_self">
<body>
<input type="button" onclick="JavaScript:window.opener.document.getElementById('p0').value='值一';window.opener.document.getElementById('p1').value='值二';window.close();" value="確定">
</body>
二：使用showModalDialog開啟子視窗
1：單值傳遞
由於window.showModalDialog 開啟的子視窗，不支援 window.opener屬性，因此，我們使用一引數方式來傳值。具體操作如下：
頁面檔案1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
<!--
function show()
{
var a=window.showModalDialog('2.html',"pwin",'dialogWidth:480px;dialogHeight:460px;center:yes;resizable:no;scroll:no');
document.dForm.p.value=a;
}
//-->
</script>
<body>
<form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
<input type="text" size="30" name="p" id="p" value=""/>
</form>
<a href="javascript:void(0);" onclick="show();">ShowModelDialog</a>
</body>
</html>
彈出的子視窗2.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_self">
<body>
<input type="button" onclick="JavaScript:window.returnValue='這是返回的值';window.close();" value="確定">
<input type="button" onclick="JavaScript:window.returnValue='';window.close();" value="取消">
</body>
2：多值傳遞
多值的傳遞方法同第一點，也是通過一個引數來傳遞，由於是多個值，所以我們自然而然地想到要用陣列來傳遞。
頁面檔案11.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
<!--
function show()
{
var a=new Array(3);
var a=window.showModalDialog('22.html',"pwin",'dialogWidth:480px;dialogHeight:460px;help:no;center:yes;resizable:no;scroll:no');
document.dForm.p0.value=a[0];
document.dForm.p1.value=a[1];
document.dForm.p2.value=a[2];
}
//-->
</script>
<body>
<form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
<input type="text" size="30" name="p0" id="p0" value=""/><br />
<input type="text" size="30" name="p1" id="p1" value=""/><br />
<input type="text" size="30" name="p2" id="p2" value=""/>
</form>
<a href="javascript:void(0);" onclick="show();">ShowModelDialog</a>
</body>
</html>
彈出子窗視窗22.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_self">
<body>
<input type="button" onclick="JavaScript:var s=Array(3);s[0]='abc';s[1]='bcd';s[2]='cde'; window.returnValue=s;window.close();" value="確定">
</body>