JavaScript 彈出子窗體并返回結(jié)果到父窗體的實現(xiàn)代碼
思路:用window.showModalDialog方法獲取到彈出子窗體的引用,再在子頁面用window.returnValue="***"來返回結(jié)果。
示例代碼:(用jQuery簡化實現(xiàn))
父頁面:parent.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>父頁面</title> <mce:script language="javascript"><!-- function showmodal() { var strReturn = window.showModalDialog("son.html",null,"dialogWidth:800px;dialogHeight:600px;help:no;status:no"); var s="您選擇了:"; for(var i=0;i<strReturn.length;i++) { s+=strReturn[i]+","; } alert(s); } // --></mce:script> </body> </html>
子頁面 son.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>子窗體</title> <mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript"><!-- var result; $(function(){ $("#send").click(function(){ var result=new Array(); $("[name=a]:checkbox:checked").each(function(){ result.push($(this).val()); }); window.returnValue=result; window.close(); }); }); // --></mce:script> </head> <body> <p> <input type="checkbox" name="a" value="蘋果" />蘋果 <input type="checkbox" name="a" value="橘子" />橘子 <input type="checkbox" name="a" value="香蕉" />香蕉 <INPUT type="button" value="提交" id="send" /> </p> </body> </html>
總結(jié):
參數(shù)傳遞:
1. 要想對話框傳遞參數(shù),是通過vArguments來進行傳遞的。類型不限制,對于字符串類型,最大為4096個字符。也可以傳遞對象,例如:
-------------------------------
parent.htm
<script> var obj = new Object(); obj.name="51js"; window.showModalDialog("son.htm",obj,"dialogWidth=200px;dialogHeight=100px"); </script>
son.htm
<script> var obj = window.dialogArguments alert("您傳遞的參數(shù)為:" + obj.name) </script>
2. 可以通過window.returnValue向打開對話框的窗口返回信息,當(dāng)然也可以是對象。例如:
parent.htm
<script> str =window.showModalDialog("son.htm",,"dialogWidth=200px;dialogHeight=100px"); alert(str); </script>
son.htm
<script> window.returnValue="http://blog.csdn.net/a497785609"; </script>
擴展:
在.net中,可以通過這種方式來實現(xiàn)AJAX效果。當(dāng)子頁面?zhèn)鬟f所要選擇的參數(shù)后,父頁面可以實現(xiàn)ICallbackEventHandler接口,直接將獲取到的值傳回服務(wù)器端?;蛘哂?strong>UpdatePanel的Load事件來撲捉到傳遞過來的參數(shù),從而繼續(xù)進行服務(wù)器端處理。
以上這篇JavaScript 彈出子窗體并返回結(jié)果到父窗體的實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery獲取所有選中的checkbox實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query獲取所有選中的checkbox實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05基于jquery實現(xiàn)可定制的web在線富文本編輯器附源碼下載
UEditor的功能非常強大,官方已配備了php,asp,asp.net,java等語言的上傳程序,拿來就可以使用,當(dāng)然ueditor更具有功能插件接口,很輕松地添加自己定義功能到編輯器中,方便項目的不同需求2015-11-11jquery中的$(document).ready()使用小結(jié)
本篇文章主要是對jquery中的$(document).ready()使用方法進行了詳細的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02