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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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中MD5函数使用实例代码
2008/06/07 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
详解PHP中的PDO类
2015/07/06 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript Split()方法
2015/12/18 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
详解python配置虚拟环境
2019/04/08 Python
python SocketServer源码深入解读
2019/09/17 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python集合删除多种方法详解
2020/02/10 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python 如何将office文件转换为PDF
2020/09/22 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
财务主管岗位职责
2014/02/28 职场文书
走进毛泽东观后感
2015/06/04 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers
Linux中sftp常用命令整理
2022/06/28 Servers