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 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 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
php生成文件
2007/01/15 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
jquery实现穿梭框功能
2021/01/19 jQuery
教你安装python Django(图文)
2013/11/04 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
医学生实习自我鉴定
2013/09/27 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
关于运动会的广播稿
2014/09/22 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
业余无线电通联Q语
2022/02/18 无线电
方法汇总:Python 安装第三方库常用
2022/04/26 Python
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers