HTML子窗体传值父窗体的几种方式

最新推荐文章于 2023-04-06 15:53:48 发布

最新推荐文章于 2023-04-06 15:53:48 发布 · 231 阅读

本文详细介绍了如何在HTML中利用JavaScript在父子窗口间实现数据传递，包括使用opener方法、window对象属性及showModalDialog函数的实现方式，并提供示例代码帮助理解。

第一种：Open

1.通过Opener方法调用父窗体方法传值

<html>
2

<head>
3

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
4

<title>父窗体</title>
5

</head>
6

<body>
7

<formname="form1"method='get'>
8

<inputtype=textname='txtvalue'value=''>
9

<inputtype='button'on<wbr>click</wbr>='openWindow()'value="弹出">
10

</form>
11<scripttype="text/javas<wbr>cript"</wbr>>
12functionopenWindow(){
13window.open(子窗体.html','newWindow','height=300,width=300,scrollbars=auto');
14}
15functionsetValue(returnValue){
16document.getElementById('txtvalue').value=returnValue;
17}
18</script>
19
20</body>
21</html>

<html>
2

<head>
3

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
4

<title>子窗口</title>
5<scripttype="text/javas<wbr>cript"</wbr>>
6
7functionvalueExit(){
8varreturnValue=docment.getElementById('txtValue').value;
9opener.setValue(returnValue);
10window.close();
11}
12</script>
13

</head>
14

<body>
15

<h1align='center'>子窗口!</h1><hr>
16

<divalign='center'>
17

<formname="fz"act<wbr>ion</wbr>='#'method='get'>
18

<inputtype=textname='txtValue'id='txtValue'>
19

<inputtype='button'value='关闭'on<wbr>click</wbr>='valueExit()'/>
20

</form>
21

</div>
22

</body>
23

</html>

2.在子窗体里面用window.opener.document.from方法传值

<html>
2

<head>
3

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
4

<title>父窗体</title>
5

</head>
6

<body>
7

<formname="f1"act<wbr>ion</wbr>='#'method='get'>
8

<inputtype=textname='ft'value=''>
9

<inputtype='button'on<wbr>click</wbr>='openWindow()'value="弹出"/>
10

</form>
11<scripttype="text/javas<wbr>cript"</wbr>>
12
20

</script>
21

</select>
22

</body>
23

</html>

<html>
2

<head>
3

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
4

<title>子窗口</title>
5

</head>
6

<body>
7

<h1align='center'>子窗口!</h1><hr>
8

<divalign='center'>
9

<formname="fz"act<wbr>ion</wbr>='#'method='get'>
10

<inputtype=textname='tt'>
11

<inputtype='button'value='关闭'on<wbr>click</wbr>='window.opener.document.f1.ft.value=document.fz.tt.value;self.close();'/>
12

</form>
13

</div>
14

</body>
15

</html>

扩展：子窗体关闭要刷新父窗体，在子窗体赋值的第一句加上opener.location= opener.location.href;

第二种：ShowModalDialog

1.window.returnValue方法传值

<html>
2

<head>
3<scripttype="text/javas<wbr>cript"</wbr>>
function fnOpen() {
4varreturnTarget=window.showModalDialog("zichuangti.aspx",'newWindow','dialogHeight=500px;dialogWidth=700px;center=yes;resizable=yes;help=no;');
5if(returnTarget!=undefined&&returnTarget.length>0) }
8</script>
9

</head>
10

<body>
11

<formid="form1"runat="server">
12

<div>
13

传过来的值:<inputtype="text"id="oArgs"runat="server"/>
14

<inputid="button"name="button"type="button"value="打开窗口"runat="server"on<wbr>click</wbr>="fnOpen()"/>
15

</div>
16

</form>
17

</body>
19

</html>
20

<html>
<head>
<scripttype="text/javas<wbr>cript"</wbr>>
functionexit()
{
window.returnValue=form1.txtreturn.value;//返回值
window.close();
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
传递过来的值:<inputtype="text"id="txtreturn"runat="server"/>
<inputid="button"name="button"type="button"value="关闭窗口"runat="server"on<wbr>click</wbr>="exit()"/>
</div>
</form>
</body>
</html>