zoukankan      html  css  js  c++  java

  • 父子页面传值问题（转）

    原文地址：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.   
    14. <BODY>   
    15. <A href="" onclick="getValue('11')">11</A>   
    16. <A href="" onclick="getValue('22')">22</A>   
    17. <A href="" onclick="getValue('33')">33</A>   
    18. <A href="" onclick="getValue('44')">44</A>   
    19. </BODY>   
    20. </HTML>  

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



     

     

     
  • 相关阅读:
    Integer和Integer常量池
    Spring中常用的23中设计模式
    GitHub 简单教程
    IDEA 中用好 Lombok，撸码效率至少提升5倍！
    Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案
    ROS常用命令和VIM常用命令
    ROS运行
    VINS-Mono运行
    环境配置相关
    C89标准和C99标准C11标准的区别
  • 原文地址：https://www.cnblogs.com/lovezhangyu/p/3859800.html
Copyright © 2011-2022 走看看