脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS获取子窗口中返回的数据

JS获取子窗口中返回的数据实现方法

 更新时间：2016年05月28日 08:53:34   投稿：jingxian  
下面小编就为大家带来一篇JS获取子窗口中返回的数据实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在开发的时候，遇到了这样一个问题，客户填写自己的收货地址，可以新建，但同时也可以选择之前填写的，由于我们的客户本身就是商户，地址繁多，把它之前的地址简单用个下拉框罗列出来显然不合适，并且客户要求能够对地址通过姓名筛选，这样，选择地址就必须再开一个小窗来完成了，那么，小窗中填写的值怎么回传呢？

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获取子窗口中返回的数据实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js+css3实现旋转效果

    js+css3实现旋转效果

    本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序用户授权环节实现过程

    微信小程序用户授权环节实现过程

    这篇文章主要介绍了微信小程序用户授权环节实现过程，在商城项目中，我们需要对部分的页面，进行一个授权的判别，例如购物车，及个人中心，需要完成用户信息的授权后，获取到相关信息
    2023-01-01
  • 微信小程序网络封装(简单高效)

    微信小程序网络封装(简单高效)

    这篇文章主要介绍了微信小程序网络封装(简单高效)，微信小程序的网络请求很便捷，直接调用就可以了。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript使用前缀树(trie树)实现文本高亮

    JavaScript使用前缀树(trie树)实现文本高亮

    这篇文章主要为大家详细介绍了JavaScript如何使用前缀树(trie树)实现文本高亮效果,文中的示例代码讲解详细,有需要的小伙伴可以参考下
    2024-04-04
  • Bootstrap每天必学之标签页（Tab）插件

    Bootstrap每天必学之标签页（Tab）插件

    Bootstrap每天必学之标签页（Tab）插件，通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScrip如果基于url实现图片下载

    JavaScrip如果基于url实现图片下载

    这篇文章主要介绍了JavaScrip如果基于url实现图片下载,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • javascrip关于继承的小例子

    javascrip关于继承的小例子

    javascrip关于继承的小例子，需要的朋友可以参考一下
    2013-05-05
  • javascript DOM设置样式详细说明和示例代码

    javascript DOM设置样式详细说明和示例代码

    JavaScript也可以用来修改DOM元素的样式,我们可以使用style属性来访问和修改元素的样式属性,这篇文章主要给大家介绍了关于javascript DOM设置样式详细说明和示例代码的相关资料,需要的朋友可以参考下
    2024-06-06
  • 小程序实现录音上传功能

    小程序实现录音上传功能

    这篇文章主要为大家详细介绍了小程序实现录音上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • javascript放大镜效果的简单实现

    javascript放大镜效果的简单实现

    这篇文章主要是对javascript放大镜效果的简单实现进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论