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元素的方法。樣本如下。
複製代碼 代碼如下:
         function ShowExit() {
             //擷取iframe的window對象
             var topWin = window.top.document.getElementById("topNav").contentWindow;
             //通過擷取到的window對象操作HTML元素，這和普通頁面一樣
             topWin.document.getElementById("exit").style.visibility = "visible";
         }　　說明：第一步，通過window.top.document.getElementById("topNav")方法擷取了頂部菜單頁面（topPage.htm）所在的iframe對象；第二步，通過上一步擷取到的iframe對象的contentWindow屬性得到了iframe中元素所在的window對象；第三步，通過上一步擷取到的window對象來操作iframe架構中的元素，這和操作不在iframe架構中的普通HTML元素是一樣的。