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>  

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



     

     

     
  • 相关阅读:
    Recommended Books for Algo Trading in 2020
    Market Making is simpler than you think!
    Top Crypto Market Makers of 2020
    Top Crypto Market Makers, Rated and Reviewed
    爬取伯乐在线文章（五）itemloader
    爬取伯乐在线文章（四）将爬取结果保存到MySQL
    爬取伯乐在线文章（三）爬取所有页面的文章
    爬取伯乐在线文章（二）通过xpath提取源文件中需要的内容
    爬取伯乐在线文章（一）
    爬虫去重策略
  • 原文地址：https://www.cnblogs.com/lovezhangyu/p/3859800.html
Copyright © 2011-2022 走看看