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 DOM模型操作
Dec 28 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
JS实现简单的表格增删
Jan 16 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
JS的深浅复制详细
Oct 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
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
js控制CSS样式属性语法对照表
2012/12/11 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Python中unittest用法实例
2014/09/25 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python如何快速实现分布式任务
2017/07/06 Python
python3实现名片管理系统
2020/11/29 Python
python操作redis数据库的三种方法
2020/09/10 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
服装设计专业毕业生求职信
2014/04/09 职场文书
健康教育评估方案
2014/05/25 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年招生工作总结
2015/05/04 职场文书