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 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
微信小程序实现刷脸登录
May 25 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 sybase_fetch_array使用方法
2014/04/15 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
医科大学毕业生自荐信
2014/02/03 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
生产车间管理制度
2015/08/04 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
MySQL Router的安装部署
2021/04/24 MySQL