使用JS在父窗体和子窗体间传值

今天遇到了需要将子窗体的数据传递给父窗体的问题,到网上找了个答案。特分享下。以备不时之需。

1.在父窗体中把子窗体的值带出来

第一种方法:

(1)在父窗体中的代码:

  <html>
  <head>
   <script type="text/javascript">
    function toUrl()
    {
      window.open("你的子窗体页面");
    }
  
   </script>
   </head>
  <body>
  <form id="form1">
    <input type="text" value="" id="text1"/>
    <input type="button" value="打开" onclick="toUrl()">
  </form>
  </body>
</html>

(2)子窗体中的代码

<html>
  <head>
    <script type="text/javascript">
     function goback()
     {

//opener代表了父窗体
       window.opener.document.getElementById("text1").value=document.getElementById("text2").value;
       window.close();
     }
   </script>

 </head>
 
  <body>
    <form id="form1">
      <input type="text" id="text2" value=""/>
      <input type="button" value="回传" onclick="goback()">
    </form>
  </body>
</html>

第二种方法:

(1)在父窗体中的代码:

<html>
  <head>
   <script type="text/javascript">
     function toUrl()
     {
       var a=window.showModalDialog("你的子窗体页面",window);
 
       if(a!="[object]")  //这个地方可以不判断,意义不大
       {
         document.getElementById("text1").value=a;
       }
    
     }
   </script>
   
 

  </head>
 
  <body>
    <form id="form1">
      <input id="text1" type="text" value="">
      <input type="button" id=”button1“ onclick="toUrl()"/>
    </form>
  </body>
</html>

(2)在子窗体中的页面

<html>
  <head>
    <script type="text/javascript">
     function reVal()
     {
       var b=document.getElementById("text2").value;
       window.returnValue=b;
       window.close();
     }
    </script>

  </head>
  <body>
    <form id="form1">
     <input type="text" id="text2" value=""/>
     <input type="button" value="回传" onclick="reVal();"/>
    </form>
  </body>
</html>

2.在子窗体里带出父窗体里的值

(1)父窗体里的代码

<html>
  <head>
    <script type="text/javascript" language="javascript">
       function openwindow()
       {
         
         window.open("你的父窗体页面","_blank");
          }
    </script>
  </head>
 
  <body>

    <input type="text" value="" id="text1">
    <input type="button" value="打开" onclick="openwindow()">
  </body>
</html>

(2)子窗体里的代码

<html>
  <head>
   <script>
    function fun() {
  
     window.opener.document.getElementById("text1").value="info";
 
    
     window.close();
   
}
</script>

  </head>
 
  <body>
  

<input type="button" onclick="fun()" value="aaa">
   
  </body>
</html>

原文地址:https://www.cnblogs.com/luodao1991/p/3153064.html