一、需求与遇到的问题
在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。
我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。
我现在遇到的问题是：如何在页面的一个iframe子页面（mainPage.htm）中获取并且操作其它iframe子页面（比如topPage.htm）中的HTML元素？
二、通过JS获取并操作iframe中的元素来解决问题
这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
经过我在网上查资料，找到了JS操作iframe中HTML元素的方法。示例如下。
1 function ShowExit() {
2 //获取iframe的window对象
3 var topWin = window.top.document.getElementById("topNav").contentWindow;
4 //通过获取到的window对象操作HTML元素，这和普通页面一样
5 topWin.document.getElementById("exit").style.visibility = "visible";
6 }
说明：第一步，通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面 （topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中 元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通 HTML元素是一样的。
下面是我在重现以及解决这个问题时写的全部代码（布局太丑，但重点是JS方法）：
1.使用iframe框架布局的顶级页面（JS操作iframe中的元素.htm）
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>JS操作iframe中的元素</title>
5 <style type="text/css">
6 #topDiv
7 {
8 width: 100%;
9 height: 100px;
10 background: #b6b6b6;
11 border-top: 0px;
12 }
13 #topNav
14 {
15 width: 100%;
16 border: 0px;
17 margin-top: 45px;
18 }
19 #middleDiv
20 {
21 width: 100%;
22 height: 360px;
23 border-top: 10px solid #fff;
24 }
25
26 #leftNav
27 {
28 float: left;
29 width: 10%;
30 height: 360px;
31 background: #b6b6b6;
32 border: 0px;
33 }
34
35 #mainContent
36 {
37 float: right;
38 height: 360px;
39 width: 89%;
40 border: 0px;
41 margin-left: 10px;
42 }
43
44 #bottomDiv
45 {
46 width: 100%;
47 float: left;
48 }
49
50 #bottomNav
51 {
52 clear: both;
53 margin: 0;
54 padding: 0;
55 width: 100%;
56 height: 46px;
57 background: #b6b6b6;
58 border: 0px;
59 border-top: 10px solid #fff;
60 border-bottom: 10px solid #fff;
61 }
62 </style>
63 </head>
64 <body>
65 <div id="topDiv">
66 <iframe id="topNav" src="topPage.htm"></iframe>
67 </div>
68 <div id="middleDiv">
69 <div id="leftDiv">
70 <iframe id="leftNav" src="LeftPage.htm"></iframe>
71 </div>
72 <div id="mainDiv">
73 <iframe id="mainContent" src="mainPage.htm"></iframe>
74 </div>
75 </div>
76 <div id="bottomDiv">
77 <iframe id="bottomNav" src="bottomPage.htm"></iframe>
78 </div>
79 </body>
80 </html>
2.顶部菜单栏页面（topPage.htm）
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 <style type="text/css">
6 ul
7 {
8 list-style-type: none;
9 float: left;
10 padding: 0px;
11 margin: 0px;
12 width: 100%;
13 text-align: center;
14 margin: 0px auto;
15 }
16 a
17 {
18 text-decoration: none;
19 color: White;
20 background-color: Purple;
21 border: 1px solid white;
22 float: left;
23 width: 7em;
24 padding: 0.2em 0.6em;
25 font-weight: bold;
26 }
27 a:hover
28 {
29 background-color: #ff3300;
30 }
31 li
32 {
33 display: inline;
34 }
35 #exit
36 {
37 float: right;
38 visibility: hidden;
39 }
40 </style>
41 </head>
42 <body>
43 <ul>
44 <li><a href="#">文章管理</a></li>
45 <li><a href="#">会员管理</a></li>
46 <li><a href="#">系统管理</a></li>
47 <li id="exit"><a href="#">退出</a></li>
48 </ul>
49 </body>
50 </html>
3.左侧导航栏（leftPage.htm）
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 <style type="text/css">
6 ul
7 {
8 list-style-type: none;
9 float: left;
10 margin: 5px;
11 padding:5px;
12 }
13 a
14 {
15 text-decoration: none;
16 color: White;
17 background-color: Purple;
18 border: 1px solid white;
19 width: 7em;
20 padding: 0.2em 0.6em;
21 font-weight: bold;
22 }
23 a:hover
24 {
25 background-color: #ff3300;
26 }
27 </style>
28 </head>
29 <body>
30 <div>
31 <ul>
32 <li><a href="#">栏目一 </a></li>
33 <li><a href="#">栏目二</a></li>
34 <li><a href="#">栏目三</a></li>
35 </ul>
36 </div>
37 </body>
38 </html>
4.需要访问顶部菜单页面元素的主页面（mainPage.htm）
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 <style type="text/css">
6 body
7 {
8 background-color: #B9E5FB;
9 }
10 </style>
11 <script type="text/javascript">
12 function ShowExit() {
13 //获取iframe的window对象
14 var topWin = window.top.document.getElementById("topNav").contentWindow;
15 //通过获取到的window对象操作HTML元素，这和普通页面一样
16 topWin.document.getElementById("exit").style.visibility = "visible";
17 }
18 </script>
19 </head>
20 <body>
21 <div>
22 <input type="button" name="btnOk" value="在顶端显示退出" onclick="ShowExit();" />
23 </div>
24 </body>
25 </html>
5.底部页面（bottomPage.htm）
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 </head> 6 <body> 7 <div> 8 底部版权区：这是一个底部的测试页面 9 </div> 10 </body> 11 </html>
时间： 2024-08-08 19:00:28