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 相关文章推荐
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
javascript操作表格排序实例分析
May 06 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
详解TypeScript的基础类型
Feb 18 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使用Pthread实现的多线程操作实例
2015/11/14 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
AngularJS语法详解
2015/01/23 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python之reload流程实例代码解析
2018/01/29 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python网络编程之五子棋游戏
2020/05/14 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
新电JAVA笔试题目
2014/08/31 面试题
shell的种类有哪些
2015/04/15 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
自我推荐书
2013/12/04 职场文书
会计岗位说明书
2014/07/29 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
恰同学少年观后感
2015/06/08 职场文书
Golang: 内建容器的用法
2021/05/05 Golang