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+css实现的简单易用兼容好的分页
Dec 30 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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中jpgraph类库的使用介绍
2013/08/08 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery中:image选择器用法实例
2015/01/03 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
react 生命周期实例分析
2020/05/18 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python线程的几种创建方式详解
2019/08/29 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
详细分析Python collections工具库
2020/07/16 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
会计应届生的自荐信
2013/12/13 职场文书
群教个人对照检查材料
2014/08/20 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
小学中队活动总结
2015/05/11 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS