首頁 > 開發者 > JavaScript
思路：用window.showModalDialog方法擷取到彈出子表單的引用，再在子頁面用window.returnValue="***"來返回結果。
範例程式碼：（用jQuery簡化實現）
父頁面：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>
總結：
參數傳遞：
1. 要想對話方塊傳遞參數，是通過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("您傳遞的參數為：" + obj.name)</script>
2. 可以通過window.returnValue向開啟對話方塊的視窗返回資訊，當然也可以是對象。例如：
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中，可以通過這種方式來實現AJAX效果。當子頁面傳遞所要選擇的參數後，父頁面可以實現ICallbackEventHandler介面，直接將擷取到的值傳回伺服器端。或者用UpdatePanel的Load事件來撲捉到傳遞過來的參數，從而繼續進行伺服器端處理。
以上這篇JavaScript 彈出子表單並返回結果到父表單的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
