JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法
在開(kāi)發(fā)的時(shí)候,遇到了這樣一個(gè)問(wèn)題,客戶(hù)填寫(xiě)自己的收貨地址,可以新建,但同時(shí)也可以選擇之前填寫(xiě)的,由于我們的客戶(hù)本身就是商戶(hù),地址繁多,把它之前的地址簡(jiǎn)單用個(gè)下拉框羅列出來(lái)顯然不合適,并且客戶(hù)要求能夠?qū)Φ刂吠ㄟ^(guò)姓名篩選,這樣,選擇地址就必須再開(kāi)一個(gè)小窗來(lái)完成了,那么,小窗中填寫(xiě)的值怎么回傳呢?
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) { //處理子窗口的返回值 } }
子窗口中,在用戶(hù)完成篩選選擇等一系列動(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ì)了,父窗口怎么向子窗口傳值呢,在本例下,我們需要知道操作用戶(hù)的id才能給他選擇自己之前填寫(xiě)過(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è)參考,也希望大家多多支持腳本之家。
- jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
- js 父窗口控制子窗口的行為-打開(kāi),關(guān)閉,重定位,回復(fù)
- js操作模態(tài)窗口及父子窗口間相互傳值示例
- JavaScript實(shí)現(xiàn)彈出子窗口并傳值給父窗口
- JavaScript子窗口調(diào)用父窗口變量和函數(shù)的方法
- 用javascript父窗口控制只彈出一個(gè)子窗口
- JavaScript新窗口與子窗口傳值詳解
- js創(chuàng)建子窗口并且回傳值示例代碼
- jquery 子窗口操作父窗口的代碼
- iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
- JQUERY 獲取IFrame中對(duì)象及獲取其父窗口中對(duì)象示例
- 解析jquery獲取父窗口的元素
- JS與jQuery實(shí)現(xiàn)子窗口獲取父窗口元素值的方法
相關(guān)文章
JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了JS滑動(dòng)拼圖驗(yàn)證相關(guān)原理、實(shí)現(xiàn)步驟與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03詳解小程序如何改變onLoad的執(zhí)行時(shí)機(jī)
這篇文章主要介紹了詳解小程序如何改變onLoad的執(zhí)行時(shí)機(jī),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11js實(shí)現(xiàn)簡(jiǎn)單圓盤(pán)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單圓盤(pán)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript開(kāi)發(fā)人員的10個(gè)關(guān)鍵習(xí)慣小結(jié)
還在一味沒(méi)有目的的編寫(xiě)JavaScript代碼嗎?那么你就OUT了!讓我們一起來(lái)看看小編為大家搜羅的JavaScript開(kāi)發(fā)人員應(yīng)該具備的十大關(guān)鍵習(xí)慣吧2014-12-12JavaScript中展開(kāi)運(yùn)算符及應(yīng)用的實(shí)例代碼
這篇文章主要介紹了JavaScript中展開(kāi)運(yùn)算符及應(yīng)用的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01js兼容pc端瀏覽器并有多種彈出小提示的手機(jī)端浮層控件實(shí)例
這篇文章主要介紹了js兼容pc端瀏覽器并有多種彈出小提示的手機(jī)端浮層控件,實(shí)例分析了javascript多種彈出層效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04重學(xué)JS之顯示強(qiáng)制類(lèi)型轉(zhuǎn)換詳解
這篇文章主要給大家介紹了關(guān)于重學(xué)JS之顯示強(qiáng)制類(lèi)型轉(zhuǎn)換的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06