原文地址：http://javacrazyer.iteye.com/blog/1498199
开发中遇到父子页面传值问题会很棘手，现收集两种方式的父子页面传值的方式，以方便今后使用
1）弹窗式，通过使用window.showModalDialog()
父页面parent.html
Html代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript"> <!-- function show() { var a=window.showModalDialog('child.html',"_blank",'dialogWidth:480px;dialogHeight:460px;center:yes;resizable:no;scroll:no'); document.dForm.p.value=a; } //--> </script> <body> <form name="dForm" id="dForm" method="post" οnsubmit="return dFormCK();" action="abc.php"> <input type="text" size="30" name="p" id="p" value=""/> </form> <a href="javascript:void(0);" οnclick="show();">ShowModelDialog</a> </body> </html>
子窗口child.html
Html代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <base target="_self"> <body> <input type="button" οnclick="JavaScript:window.returnValue='hahahhah';window.close();" value="sure"> <input type="button" οnclick="JavaScript:window.returnValue='';window.close();" value="cancel"> </body>点击父页面上的链接弹出子窗口，在子窗口中点击确定传值到父页面，实现效果如下图所示
2）新页面式，通过使用window.open()
父页面parent.html
Html代码 <HTML> <HEAD> <TITLE> parent </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function method(){ window.open("child.html"); } //--> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST ACTION="" > <INPUT TYPE="text" NAME="" id="text1"><br> </FORM> <INPUT TYPE="button" value="foward" οnclick="method()"> </BODY> </HTML>子页面child.html
Html代码 <HTML> <HEAD> <TITLE>child</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function getValue(str){ window.opener.document.getElementById("text1").value=str; window.close(); } //--> </SCRIPT> </HEAD> <BODY> <A href="" οnclick="getValue('11')">11</A> <A href="" οnclick="getValue('22')">22</A> <A href="" οnclick="getValue('33')">33</A> <A href="" οnclick="getValue('44')">44</A> </BODY> </HTML>点击父页面按钮跳转到新页面，也就是子页面，点击子页面的链接将值传递回父页面中，实现效果如下图所示
转载于:https://www.cnblogs.com/lovezhangyu/p/3859800.html
相关资源：layer弹出子iframe层父子页面传值的实现方法