JS获取子窗口中返回的数据实现方法


Posted in Javascript onMay 28, 2016

在开发的时候,遇到了这样一个问题,客户填写自己的收货地址,可以新建,但同时也可以选择之前填写的,由于我们的客户本身就是商户,地址繁多,把它之前的地址简单用个下拉框罗列出来显然不合适,并且客户要求能够对地址通过姓名筛选,这样,选择地址就必须再开一个小窗来完成了,那么,小窗中填写的值怎么回传呢?

js有个方法showModalDialog在这种情况下用的就比较多了,其作用是打开一个模态窗口,什么事模态窗口?就是打开后不能操作父窗口,只有子窗口操作完了,关闭了,才可以继续父窗口的动作。回到最开始的问题的话,就是给一个地址选择入口,点击触发事件btn_click()。

父窗口JS

function btn_click() 
{ 
      var returnValue = window.showModalDialog('chooseAddr.aspx', window, 'dialogWidth=500px;dialogHeight=600px;status=no'); 
 
      if (vReturnValue !== "" && vReturnValue !== undefined) 
      { 
        //处理子窗口的返回值 
      } 
 }

子窗口中,在用户完成筛选选择等一系列动作以后,确定时,触发事件returnVal()。

function returnVal() 
{ 
      var rtArr = new Array(); 
      rtArr[0] = "test0"; 
      rtArr[1] = "test1"; 
      window.returnValue = retArr; 
 
      window.close();//关掉子窗口,才能继续父窗口的操作 
}

这样,就完成了父子窗口的“数据互动”,对了,父窗口怎么向子窗口传值呢,在本例下,我们需要知道操作用户的id才能给他选择自己之前填写过的地址,只需在

window.showModalDialog的第一个参数,即打开的子窗口地址中加上参数?id=xxx,没错get方式传过去就OK了。

以上这篇JS获取子窗口中返回的数据实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
javascript preload&lazy load
May 13 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
js和jquery中获取非行间样式
May 05 jQuery
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 #Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 #Javascript
全面解析多种Bootstrap图片轮播效果
May 27 #Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 #Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 #Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 #Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 #Javascript
You might like
php排序算法实例分析
2016/10/17 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
python矩阵的转置和逆转实例
2018/12/12 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python turtle 绘制太极图的实例
2019/12/18 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
通过代码实例了解Python sys模块
2020/09/14 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
教师实习自我鉴定
2013/12/14 职场文书
《长城》教学反思
2014/02/14 职场文书
应届大专生自荐书
2014/06/16 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
慰问信范文
2015/02/14 职场文书
教师节联欢会主持词
2015/07/04 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers