父子页面传值

//from http://javacrazyer.iteye.com/blog/1498199

开发中遇到父子页面传值问题会很棘手,现收集两种方式的父子页面传值的方式,以方便今后使用

1)弹窗式,通过使用window.showModalDialog()

父页面parent.html

Html代码  收藏代码
  1. <html>
  2. <head>
  3. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  4. <script language=”JavaScript”>
  5. <!–
  6. function   show()
  7. {
  8.   var   a=window.showModalDialog(‘child.html’,”_blank”,’dialogWidth:480px;dialogHeight:460px;center:yes;resizable:no;scroll:no’);
  9.   document.dForm.p.value=a;
  10.   }
  11. //–>
  12. </script>
  13. <body>
  14. <form name=”dForm” id=”dForm” method=”post” onsubmit=”return dFormCK();” action=”abc.php”>
  15. <input type=”text” size=”30″ name=”p” id=”p” value=””/>
  16. </form>
  17. <a href=”javascript:void(0);” onclick=”show();”>ShowModelDialog</a>
  18. </body>
  19. </html>

子窗口child.html

Html代码  收藏代码
  1. <html>
  2. <head>
  3. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  4. <base target=”_self”>
  5. <body>
  6. <input type=”button” onclick=”JavaScript:window.returnValue=’hahahhah’;window.close();” value=”sure”>
  7. <input type=”button” onclick=”JavaScript:window.returnValue=”;window.close();” value=”cancel”>
  8. </body>

点击父页面上的链接弹出子窗口,在子窗口中点击确定传值到父页面,实现效果如下图所示


2)新页面式,通过使用window.open()

父页面parent.html

Html代码  收藏代码
  1. <HTML>
  2. <HEAD>
  3. <TITLE> parent </TITLE>
  4. <SCRIPT LANGUAGE=”JavaScript”>
  5. <!–
  6. function method(){
  7. window.open(“child.html”);
  8. }
  9. //–>
  10. </SCRIPT>
  11. </HEAD>
  12. <BODY>
  13. <FORM METHOD=POST ACTION=”” >
  14. <INPUT TYPE=”text” NAME=”” id=”text1″><br>
  15. </FORM>
  16. <INPUT TYPE=”button” value=”foward” onclick=”method()”>
  17. </BODY>
  18. </HTML>

子页面child.html

Html代码  收藏代码
  1. <HTML>
  2. <HEAD>
  3. <TITLE>child</TITLE>
  4. <SCRIPT LANGUAGE=”JavaScript”>
  5. <!–
  6. function getValue(str){
  7. window.opener.document.getElementById(“text1″).value=str;
  8. window.close();
  9. }
  10. //–>
  11. </SCRIPT>
  12. </HEAD>
  13. <BODY>
  14. <A href=”” onclick=”getValue(’11′)”>11</A>
  15. <A href=”” onclick=”getValue(’22′)”>22</A>
  16. <A href=”” onclick=”getValue(’33′)”>33</A>
  17. <A href=”” onclick=”getValue(’44′)”>44</A>
  18. </BODY>
  19. </HTML>

点击父页面按钮跳转到新页面,也就是子页面,点击子页面的链接将值传递回父页面中,实现效果如下图所示

This entry was posted in Computer. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s