JavaScript 弹出子窗体并返回结果到父窗体的实现代码


Posted in Javascript onMay 28, 2016

思路:用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 弹出子窗体并返回结果到父窗体的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 #Javascript
js弹出窗口返回值的简单实例
May 28 #Javascript
JS获取子窗口中返回的数据实现方法
May 28 #Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 #Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 #Javascript
全面解析多种Bootstrap图片轮播效果
May 27 #Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
javascript的函数
2007/01/31 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
Vuex提升学习篇
2018/01/11 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
详解微信小程序调用支付接口支付
2019/04/28 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
django项目搭建与Session使用详解
2018/10/10 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
家长给小学生的评语
2014/01/30 职场文书
四个太阳教学反思
2014/02/01 职场文书
初级会计求职信范文
2014/02/15 职场文书
元旦晚会感言
2014/03/12 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
七年级生物教学反思
2016/02/20 职场文书