下面小编就为大家带来一篇 JavaScript 弹出子窗体并返回结果到父窗体的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
思路:用 window.showModalDialog 方法获取到弹出子窗体的引用,再在子页面用 window.returnValue="***" 来返回结果。
示例代码:(用 jQuery 简化实现)
父页面:parent.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>父页面</title>
- <mce:script language="javascript"><!--
- function showmodal()
- {
- var strReturn = window.showModalDialog("son.html",null,"dialogWidth:800px;dialogHeight:600px;help:no;status:no");
- var s="您选择了:";
- for(var i=0;i<strReturn.length;i++)
- {
- s+=strReturn[i]+",";
- }
- alert(s);
- }
- // --></mce:script>
- </body>
- </html>
子页面 son.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 子窗体
- </title>
- <mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js">
- </mce:script>
- <mce:script type="text/javascript">
- <!-- var result; $(function(){ $("#send").click(function(){ var result=new
- Array(); $("[name=a]:checkbox:checked").each(function(){ result.push($(this).val());
- }); window.returnValue=result; window.close(); }); }); // -->
- </mce:script>
- </head>
- <body>
- <p>
- <input type="checkbox" name="a" value="苹果" />
- 苹果
- <input type="checkbox" name="a" value="橘子" />
- 橘子
- <input type="checkbox" name="a" value="香蕉" />
- 香蕉
- <INPUT type="button" value="提交" id="send" />
- </p>
- </body>
- </html>
总结:
参数传递:
1. 要想对话框传递参数,是通过 vArguments 来进行传递的。类型不限制,对于字符串类型,最大为 4096 个字符。也可以传递对象,例如:
-------------------------------
parent.htm
- <script>
- var obj = new Object();
- obj.name="51js";
- window.showModalDialog("son.htm",obj,"dialogWidth=200px;dialogHeight=100px");
- </script>
son.htm
- <script>
- var obj = window.dialogArguments
- alert("您传递的参数为:" + obj.name)
- </script>
2. 可以通过 window.returnValue 向打开对话框的窗口返回信息,当然也可以是对象。例如:
parent.htm
- <script>
- str =window.showModalDialog("son.htm",,"dialogWidth=200px;dialogHeight=100px");
- alert(str);
- </script>
son.htm
- <script>
- window.returnValue="http://blog.csdn.net/a497785609";
- </script>
扩展:
在. net 中,可以通过这种方式来实现 AJAX 效果。当子页面传递所要选择的参数后,父页面可以实现 ICallbackEventHandler 接口,直接将获取到的值传回服务器端。或者用 UpdatePanel 的 Load 事件来扑捉到传递过来的参数,从而继续进行服务器端处理。
以上这篇 JavaScript 弹出子窗体并返回结果到父窗体的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0301/265385.html