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 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP下对数组进行排序的函数
2010/08/08 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php include和require的区别深入解析
2013/06/17 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
大学生旷课检讨书
2014/01/22 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
z-index不起作用
2021/03/31 HTML / CSS
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
Python保存并浏览用户的历史记录
2022/04/29 Python