子页面与父页面的打开及传参方式
test22.html (即子页面)
<html>
<head>
//传递参数都是在子页面中进行传递的
<script>
//将父页面中的某个值带到子页面中
function testOpen(){
alert('e');
// window.opener代表父页面 ，可以通过表单元素取到父页面中的某个值
var parentTest1 = window.opener.document.testForm.text1.value;
alert(parentTest1);
//将父页面中获取的某个值赋给子页面。若是一开始就开始展现，在body里面onload即可。
document.getElementById('test21').value=parentTest1;
}
//将子页面中的某个值赋给父页面。并且父页面已经有这个表单元素,例如 <input type="hidden" name="text3" value=""/>
function guanbi(){
//获取子页面要传递的参数
var child=document.test2Form.text23.value;
window.opener.document.testForm.text3.value=child;
opener=null;
self.close();
}
</script>
</head>
<body onload="testOpen();">
<form name="test2Form" action="" methed="GET">
<table>
<tr>
<td>
<input type="text" id="test21" name="text21" value=""/>
</td>
<td>
<input type="text" name="text22" value="22"/>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="text23" value="23"/>
</td>
<td>
<input type="hidden" name="text24" value="24"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="button21" value="tijiao" onclick="testOpen()"/>
</td>
<td>
<input type="button" name="button22" value="guanbi" onclick="guanbi()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<hr>
testParent.html （即父页面）
<html>
<head>
<script>
function openWindowTest(){
window.open('test22.html','newwindow','height=100,width=400');
}
</script>
</head>
<body>
<form name="testForm" action="" methed="GET">
<table>
<tr>
<td>
<input type="text" name="text1" value="1"/>
</td>
<td>
<input type="text" name="text2" value="2"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="text3" value=""/>
</td>
<td>
<input type="text" name="text4" value="4"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="button1" value="打开子页面" onclick="openWindowTest()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
浙公网安备 33010602011771号