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 学习笔记(七)字符串的连接
Dec 31 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
浅谈node的事件机制
2017/10/09 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
房屋买卖协议书范本
2014/04/10 职场文书
社区文艺活动方案
2014/08/19 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
薪资证明范本
2015/06/19 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
python基础之类方法和静态方法
2021/10/24 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript