快捷導(dǎo)航

JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法

更新時(shí)間：2016年05月28日 08:53:34 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在開(kāi)發(fā)的時(shí)候，遇到了這樣一個(gè)問(wèn)題，客戶填寫自己的收貨地址，可以新建，但同時(shí)也可以選擇之前填寫的，由于我們的客戶本身就是商戶，地址繁多，把它之前的地址簡(jiǎn)單用個(gè)下拉框羅列出來(lái)顯然不合適，并且客戶要求能夠?qū)Φ刂吠ㄟ^(guò)姓名篩選，這樣，選擇地址就必須再開(kāi)一個(gè)小窗來(lái)完成了，那么，小窗中填寫的值怎么回傳呢？

js有個(gè)方法showModalDialog在這種情況下用的就比較多了，其作用是打開(kāi)一個(gè)模態(tài)窗口，什么事模態(tài)窗口？就是打開(kāi)后不能操作父窗口，只有子窗口操作完了，關(guān)閉了，才可以繼續(xù)父窗口的動(dòng)作。回到最開(kāi)始的問(wèn)題的話，就是給一個(gè)地址選擇入口，點(diǎn)擊觸發(fā)事件btn_click()。

父窗口JS

function btn_click() 
{ 
      var returnValue = window.showModalDialog('chooseAddr.aspx', window, 'dialogWidth=500px;dialogHeight=600px;status=no'); 
 
      if (vReturnValue !== "" && vReturnValue !== undefined) 
      { 
        //處理子窗口的返回值 
      } 
 }

子窗口中，在用戶完成篩選選擇等一系列動(dòng)作以后，確定時(shí)，觸發(fā)事件returnVal()。

function returnVal() 
{ 
      var rtArr = new Array(); 
      rtArr[0] = "test0"; 
      rtArr[1] = "test1"; 
      window.returnValue = retArr; 
 
      window.close();//關(guān)掉子窗口，才能繼續(xù)父窗口的操作 
}

這樣，就完成了父子窗口的“數(shù)據(jù)互動(dòng)”，對(duì)了，父窗口怎么向子窗口傳值呢，在本例下，我們需要知道操作用戶的id才能給他選擇自己之前填寫過(guò)的地址，只需在

window.showModalDialog的第一個(gè)參數(shù)，即打開(kāi)的子窗口地址中加上參數(shù)?id=xxx，沒(méi)錯(cuò)get方式傳過(guò)去就OK了。

以上這篇JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果
本文主要介紹了js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了微信小程序用戶授權(quán)環(huán)節(jié)實(shí)現(xiàn)過(guò)程，在商城項(xiàng)目中，我們需要對(duì)部分的頁(yè)面，進(jìn)行一個(gè)授權(quán)的判別，例如購(gòu)物車，及個(gè)人中心，需要完成用戶信息的授權(quán)后，獲取到相關(guān)信息
2023-01-01
微信小程序網(wǎng)絡(luò)封裝(簡(jiǎn)單高效)
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)封裝(簡(jiǎn)單高效)，微信小程序的網(wǎng)絡(luò)請(qǐng)求很便捷，直接調(diào)用就可以了。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
JavaScript使用前綴樹(shù)(trie樹(shù))實(shí)現(xiàn)文本高亮
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用前綴樹(shù)(trie樹(shù))實(shí)現(xiàn)文本高亮效果,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下
2024-04-04
Bootstrap每天必學(xué)之標(biāo)簽頁(yè)（Tab）插件
Bootstrap每天必學(xué)之標(biāo)簽頁(yè)（Tab）插件，通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中，感興趣的小伙伴們可以參考一下
2016-04-04
JavaScrip如果基于url實(shí)現(xiàn)圖片下載
這篇文章主要介紹了JavaScrip如果基于url實(shí)現(xiàn)圖片下載,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
javascrip關(guān)于繼承的小例子
javascrip關(guān)于繼承的小例子，需要的朋友可以參考一下
2013-05-05
javascript DOM設(shè)置樣式詳細(xì)說(shuō)明和示例代碼
JavaScript也可以用來(lái)修改DOM元素的樣式,我們可以使用style屬性來(lái)訪問(wèn)和修改元素的樣式屬性,這篇文章主要給大家介紹了關(guān)于javascript DOM設(shè)置樣式詳細(xì)說(shuō)明和示例代碼的相關(guān)資料,需要的朋友可以參考下
2024-06-06
小程序?qū)崿F(xiàn)錄音上傳功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
javascript放大鏡效果的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要是對(duì)javascript放大鏡效果的簡(jiǎn)單實(shí)現(xiàn)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12