JS如何获取并操作iframe中的元素？
一、需求与遇到的问题
在网站的后台管理中使用了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）
View Code
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）
View Code
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）
View Code
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）
View Code
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）
View Code
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>
参考资料：http://wenku.baidu.com/view/76d53a7b168884868762d6cb.html
http://www.w3school.com.cn/htmldom/dom_obj_window.asp
