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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
js实现筛选功能
Nov 24 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
js的一些常用方法小结
2011/06/29 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
js同源策略详解
2015/05/21 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python3设计模式之简单工厂模式
2017/10/17 Python
深入了解Django View(视图系统)
2019/07/23 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
五年级音乐教学反思
2014/02/06 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
供货协议书范本
2014/04/22 职场文书
作文评语集锦大全
2014/04/23 职场文书
公司搬迁通知
2015/04/20 职场文书
大国崛起观后感
2015/06/02 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书