一、需求与遇到的问题
在网站的后台管理中使用了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 >
66 <iframe ></iframe>
67 </div>
68 <div >
69 <div >
70 <iframe ></iframe>
71 </div>
72 <div >
73 <iframe ></iframe>
74 </div>
75 </div>
76 <div >
77 <iframe ></iframe>
78 </div>
79 </body>
80 </html>