一、需求與遇到的問題
在網站的后台管理中使用了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