js 父窗口与子窗口交互

showModalDialog

父窗口

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>a.html</title>
 5     
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9   </head>
10   <script language="JavaScript">
11 
12   </script>
13   
14   <body>
15        <form name="form1" action="test.html" method="post" >
16                   客户id: <input type="text" name="cid" value=""  id="cid"  ><br>
17             客户名称<input type="text" name="cname" value=""  id="cname"  >
18           <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>
19          </form>
20        <script type="text/javascript">
21                function openWin(){
22                 /*
23                  * vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
24                  * 参数：
25                  *     sURL：要打开的窗口的页面。可以使用绝对路径，也可以使用相对路径
26                  *  vArguments：给sURL那个页面的窗口传递参数。
27                  *  sFeatures：控制打开的sURL那个页面的窗口的样式
28                  */
29                 window.showModalDialog("a2.html",window,"help:no;status:no;dialogHeight:150px;dialogWidth:220px");
30             }
31             function setValue(cid,cname){
32                 document.getElementById("cid").value = cid;
33                 document.getElementById("cname").value = cname;
34             }
35        </script>
36 </body>
37   
38 </html>

View Code

子窗口

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>a2.html</title>
 5     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 6     <meta http-equiv="description" content="this is my page">
 7     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 8   </head>
 9    <script language="JavaScript">
10   </script>
11   <body>
12          <table border="1">
13                <tr>
14                    <td>操作</td>
15             <td>客户id</td>
16             <td>客户名称</td>
17                </tr>
18           
19           <tr>
20                    <td><input type="button" value="选择" id="ss" onclick="viewData('001','深圳华为')"></td>
21             <td>001</td>
22             <td>深圳华为</td>
23                </tr>
24           <tr>
25                    <td><input type="button" value="选择"   onclick="viewData('002','用友软件')"> </td>
26             <td>002</td>
27             <td>用友软件</td>
28                </tr>
29          </table>
30        <script type="text/javascript">
31                function viewData(pid,pname){
32                 //如何得到之前的那个窗口对象
33                 var parentWindow = window.dialogArguments;
34                 parentWindow.setValue(pid,pname);
35                 window.close();
36             }
37             
38        </script>
39   </body>
40  
41   
42   
43 </html>

View Code

open

父窗口

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>a.html</title>
 5     
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9   </head>
10   <script language="JavaScript">
11     
12 
13   </script>
14   
15   <body>
16        <form name="form1" action="test.html" method="post" >
17                <select edu="edu" id="edu">
18                      <option value="本科">本科</option>
19                </select>
20           <input type="button" name="ok" value="添加" onclick="openWin();"/>
21          </form>
22        <script type="text/javascript">
23                function openWin(){
24                 window.open("a2.html","_blank");
25             }
26             //增加option元素
27             function setValue(name){
28                 //创建option
29                 var optionElement = document.createElement("option");//<option></option>
30                 //设置属性和内置文本
31                 optionElement.setAttribute("value",name);
32                 var textNode = document.createTextNode(name);
33                 optionElement.appendChild(textNode);
34                 //挂接到select上即可
35                 document.getElementById("edu").appendChild(optionElement);
36             }
37        </script>
38 </body>
39   
40 </html>

View Code

子窗口

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>a2.html</title>
 5     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 6     <meta http-equiv="description" content="this is my page">
 7     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 8   </head>
 9   <body>
10          <table border="1">
11               
12           <tr>
13                    <td><input type="text"  name="eduname" id="eduname" value="" size=8></td>
14             <td><input type="button"  name="ok"  value="确定"   onclick="setData();"></td>
15                </tr>
16          
17          </table>
18        <script type="text/javascript">
19                function setData(){
20                 var eduName = document.getElementById("eduname").value;
21                 //得到父窗口
22                 var parentWindow = window.opener;
23                 parentWindow.setValue(eduName);
24                 window.close();
25             }
26         
27        </script>
28   </body>
29  
30   
31   
32 </html>

View Code

posted on 2014-05-30 16:57 wf110 阅读(1001) 评论(0) 编辑收藏举报