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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 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获取数组长度或某个值出现次数的方法
2015/02/11 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
Python冲顶大会 快来答题!
2018/01/17 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
如何真正的了解python装饰器
2020/08/14 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
自我鉴定200字
2013/10/28 职场文书
员工评语大全
2014/01/19 职场文书
公证委托书格式
2014/09/13 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
书法社团活动总结
2015/05/07 职场文书
严以律己学习心得体会
2016/01/13 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
导游词之上海豫园
2019/10/24 职场文书
JavaScript组合继承详解
2021/11/07 Javascript