JavaScript 弹出子窗体并返回结果到父窗体的实现代码
思路:用window.showModalDialog方法获取到弹出子窗体的引用,再在子页面用window.returnValue="***"来返回结果。
示例代码:(用jQuery简化实现)
父页面:parent.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>父页面</title> <mce:scriptlanguage="javascript"><!-- functionshowmodal() { varstrReturn=window.showModalDialog("son.html",null,"dialogWidth:800px;dialogHeight:600px;help:no;status:no"); vars="您选择了:"; for(vari=0;i<strReturn.length;i++) { s+=strReturn[i]+","; } alert(s); } //--></mce:script> </body> </html>
子页面son.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>子窗体</title> <mce:scripttype="text/javascript"src="jquery-1.4.2.min.js"mce_src="jquery-1.4.2.min.js"></mce:script> <mce:scripttype="text/javascript"><!-- varresult; $(function(){ $("#send").click(function(){ varresult=newArray(); $("[name=a]:checkbox:checked").each(function(){ result.push($(this).val()); }); window.returnValue=result; window.close(); }); }); //--></mce:script> </head> <body> <p> <inputtype="checkbox"name="a"value="苹果"/>苹果 <inputtype="checkbox"name="a"value="橘子"/>橘子 <inputtype="checkbox"name="a"value="香蕉"/>香蕉 <INPUTtype="button"value="提交"id="send"/> </p> </body> </html>