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里使用Dom操作Xml
Sep 20 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
Webpack的dll功能使用
Jun 28 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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
星际中的相关伤害
2020/03/04 星际争霸
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
python抽取指定url页面的title方法
2018/05/11 Python
python微信好友数据分析详解
2018/11/19 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python实现图像拼接功能
2020/03/23 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
报社实习生自荐信
2014/01/24 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记