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条件判断使用小技巧总结
Sep 08 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
再谈JavaScript线程
Jul 10 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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
php对称加密算法示例
2014/05/07 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Python中的元类编程入门指引
2015/04/15 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python制作词云的方法
2018/01/03 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
学python最电脑配置有要求么
2020/07/05 Python
房屋租赁协议书(标准版)
2014/10/02 职场文书
走群众路线学习笔记
2014/11/06 职场文书
教师师德表现自我评价
2015/03/05 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
小学班主任研修日志
2015/11/13 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python