javascript 主窗口、子窗口 相互调用的方法

主窗口 中有两个iframe窗口:测试窗口1;测试窗口2

 

主窗口 html 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>主窗口</title>
 5     <script type="text/javascript">
 6 function test() {
 7             alert("我来自 主窗口");
 8         }
 9 
10 function test1() {
11 var ifr = window.frames["window1"];
12 if (ifr) {
13 //alert(ifr.name);
14                 ifr.test();
15             } else {
16                 alert("没有找到 子窗口1");
17             }
18         }
19 function test2() {
20 var ifr = window.frames["window2"];
21 if (ifr) {
22 //alert(ifr.name);
23                 ifr.test();
24             } else {
25                 alert("没有找到 子窗口2");
26             }
27         }
28 </script>
29 </head>
30 <body>
31     <p>
32         这是主窗口
33     </p>
34     <br />
35     <a href="javascript:void(0)" onclick="test()">测试 主窗口</a><br />
36     <a href="javascript:void(0)" onclick="test1()">主窗口 调用 窗口1</a><br />
37     <a href="javascript:void(0)" onclick="test2()">主窗口 调用 窗口2</a><br />
38     <div style="margin: 10px; border-style: solid; border-color: #006600; width: 300px;
39         height: 150px">
40         <iframe id="window1" name="window1" scrolling="auto" frameborder="0" src="iframe1.htm"
41             style="width: 100%; height: 100%;"></iframe>
42     </div>
43     <div style="margin: 10px; border-style: solid; border-color: #FF0000; width: 300px;
44         height: 150px">
45         <iframe id="window2" name="window2" scrolling="auto" frameborder="0" src="iframe2.htm"
46             style="width: 100%; height: 100%;"></iframe>
47     </div>
48 </body>
49 </html>

 

子窗口1 代码 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6 
 7 function test() {
 8             alert("我来自 子窗口1");
 9         }
10 function test1() {
11 var f = window.parent;
12             f.test();
13         }
14 function test2() {
15 var ifr = window.parent.window.frames["window2"];
16 if (ifr) {
17 //alert(ifr.name);
18                 ifr.test();
19             } else {
20                 alert("没有找到 子窗口2");
21             }
22         }
23 </script>
24 </head>
25 <body>
26     <p>
27         这是子窗口1
28     </p>
29     <br />
30     <a href="javascript:void(0)" onclick="test()">调用自身</a><br />
31     <a href="javascript:void(0)" onclick="test1()">调用 主窗口</a><br />
32     <a href="javascript:void(0)" onclick="test2()">调用 子窗口2</a>
33 </body>
34 </html>

 

子窗口2 代码 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6 function test() {
 7             alert("我来自 子窗口2");
 8         }
 9 function test1() {
10 var f = window.parent;
11             f.test();
12         }
13 function test2() {
14 var ifr = window.parent.window.frames["window1"];
15 if (ifr) {
16 //alert(ifr.name);
17                 ifr.test();
18             } else {
19                 alert("没有找到 子窗口1");
20             }
21         }
22 </script>
23 </head>
24 <body>
25     <p>
26         这是 子窗口2
27     </p>
28     <br />
29     <a href="javascript:void(0)" onclick="test()">调用自身</a><br />
30     <a href="javascript:void(0)" onclick="test1()">调用 主窗口</a><br />
31     <a href="javascript:void(0)" onclick="test2()">调用 子窗口1</a>
32 </body>
33 </html>

 

 

子窗口 访问 主窗口

var f=window.parent;

 

主窗口 访问 子窗口 测试窗口1

var ifr = window.frames["测试窗口1"];

 

子窗口之间访问  测试窗口1 访问 测试窗口2

var ifr = window.parent.window.frames["测试窗口2"];

 

学习备用！

posted @ 2012-03-13 23:32  jxs  阅读(387)  评论(0)    收藏  举报