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>