iframe框架講解
iframe在複合文件中經常用到，這裡收集一些基本操作，需要的朋友可以參考下
JS獲取並操作iframe中元素的方法
對框架的應用
框架間的互相引用
一個頁面中的所有框架以集合的形式作為window 物件的屬性提供，例如：window.frames就表示該頁面內所有框架的集合，這和表單物件、連結物件、圖片物件等是類似的，不同的是，這些集合是 document的屬性。因此，要引用一個子框架，可以使用如下語法：
window.frames["frameName"];
window.frames.frameName
window.frames[index]
其中，window字樣也可以用self代替或省略，假設frameName為頁面中第一個框架，則以下的寫法是等價的： self.frames["frameName"]
self.frames[0]
frames[0]
frameName
每個框架都對應一個HTML頁面，所以這個框架也是一個獨立的瀏覽器視窗，它具有視窗的所有性質，所謂對框架的引用也就是對window物件的引用。有了這個window物件，就可以很方便地對其中的頁面進行操作，例如使用window.document物件向頁面寫入資料、使用window.location屬性來改變框架內的頁面等。
下面分別介紹不同層次框架間的互相引用：
1．父框架到子框架的引用
知道了上述原理，從父框架引用子框架變的非常容易，即：
window.frames["frameName"];
這樣就引用了頁面內名為frameName的子框架。如果要引用子框架內的子框架，根據引用的框架實際就是window物件的性質，可以這樣實現：
window.frames["frameName"].frames["frameName2"];
這樣就引用到了二級子框架，以此類推，可以實現多層框架的引用。
2．子框架到父框架的引用
每個window物件都有一個parent屬性，表示它的父框架。如果該框架已經是頂層框架，則
3．兄弟框架間的引用
如果兩個框架同為一個框架的子框架，它們稱為兄弟框架，可以通過父框架來實現互相引用，例如一個頁面包括2個子框架：
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
在frame1中可以使用如下語句來引用frame2：
self.parent.frames["frame2"];
4．不同層次框架間的互相引用
框架的層次是針對頂層框架而言的。當層次不同時，只要知道自己所在的層次以及另一個框架所在的層次和名字，利用框架引用的window物件性質，可以很容易地實現互相訪問，例如：
self.parent.frames["childName"].frames["targetFrameName"];
5．對頂層框架的引用
和parent屬性類似，window物件還有一個top屬性。它表示對頂層框架的引用，這可以用來判斷一個框架自身是否為頂層框架，例如：
//判斷本框架是否為頂層框架
if(self==top){
//dosomething
}
對框架內容的操作
1、IE專用(通過frames索引形象定位)：
document.frames[i].document.getElementById('元素的ID');
2、IE專用(通過iframe名稱形象定位)
document.frames['iframe的name'].document.getElementById('元素的ID');
以上方法，不僅對iframe適用，對frameset裡的frame也同樣適用。IE雖然擅於自定標準，但不得不說它很多的設計還是比較體現人性化的。比如這個，它在同樣支援下面的標準路徑之外，提供了一個簡潔且形象化的寫法。
3、通用方法：
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
注意要加上contentWindow，往往出現問題都是因為這個容易被忽略，它代表frame和iframe內部的視窗物件。
| <script type="text/javascript"> function getIframeContent(){ //獲取iframe中文件內容 var doc; if (document.all){ // IE doc = document.frames["MyIFrame"].document; }else{ // 標準 doc = document.getElementById("MyIFrame").contentDocument; } return doc.body.innerHTML; } </script>
|
注意：上面的 .contentDocument 相當於 .contentWindow.document ！
實踐
一、需求與遇到的問題
在網站的後臺管理中使用了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元素是一樣的。
jquery獲取並操作iframe中元素的方法
在父視窗中操作 選中IFRAME中的所有輸入框：
$(window.frames["iframeSon"].document).find(":text");
在IFRAME中操作 選中父視窗中的所有輸入框：
$(window.parent.document).find(":text");
iframe框架的HTML：
<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>
其他
//開啟一個tab頁
top.window.outerFrame.ifm_main.addTab(" 持倉套保業務申請（檢視）", url);