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

 

你可能感兴趣的:(js)