一 目的
iframe是網頁佈局中重要的元素，是解決一些常見前端問題的必修課，而iframe總是讓人捉摸不透，不好掌握。關於iframe，有很多問題我們必須要徹底弄清。筆者累一年經驗，3天構思，欲闡述關於iframe的那些事。雖然都是常見的知識，但是很少有人能深入理解，靈活使用。
iframe在佈局，無刷新方面都有極其中重要，不可替代的地位。雖然現在流行DIV佈局，但是有時還得用iframe佈局；雖然2005年流行使用AJAX進行無刷新，但是在特效情況下還得使用iframe；在flash動畫內嵌html時，iframe更是必不可少。本文的主要目的就是針對這些問題展開討論，並且總結。本文目的有：
1.iframe的基礎，深入理解frame是何物，屬性該如何設置。
2.iframe自適應高寬，即ifrmae在佈局方面的應用。
3.iframe的表單無刷新，iframe在上傳文件時的無刷新作用。
4.iframe的跨越問題。
5.iframe與jQuery。
請不要懷疑iframe的缺點，不要擔心iframe的使用量。各大網站都在使用，淘寶，百度，新浪，博客園，都能找到iframe的蹤跡。
二 什麼是iframe
iframe即內聯框架。不同於frame，frame與frameset綜合使用，成爲幀，框架集。frame已經不大使用了，說白了，frame是僵硬的疊加，iframe是內聯的，不是簡單的疊加，而是承前啓後，對於外圍的頁面，iframe是一個普通的元素，對於iframe裏面的內容，又是一個五臟俱全的頁面。iframe的寫法是：
<iframe id="coreIframe" name="coreIframe" src="/blank.html"></iframe>
可以看出，iframe毫無神祕可言，就是一個普通的元素，與span,div一樣。那麼，iframe是內聯元素還是塊元素？第一，iframe可以設置width,height並且有效。第二，iframe像普通文本一樣不會換行。看圖：
由此兩點，可以判定：
iframe是inline-block元素。
iframe的基本屬性與其他元素一樣，有樣式的，也有特有的。其中，關於樣式的完全可以使用css設置。有些屬性不建議使用，也沒有必要使用，下面列出iframe的常用屬性：
1.frameborder:是否顯示邊框，yes,no。
2.height:框架作爲一個普通元素的高度，建議在使用css設置。
3.width:框架作爲一個普通元素的寬度，建議使用css設置。
4.name:框架的名稱，window.frame[name]時專用的屬性。
5.scrolling:框架的是否滾動。yes,no,auto。
6.src：內框架的地址，可以使頁面地址，也可以是圖片的地址。
比較特別的iframe屬性只用三個：frameborder,scrolling,src，所有的iframe幾乎都要指定。典型的iframe元素一般是：
<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
<iframe id="mainIframe" name="mainIframe" src="blank.html" frameborder="0" scrolling="auto" ></iframe>
並且使用css設置其樣式：
#mainIframe{
width:1000px;
height:800px;
border:1px blue solid;
margin-left:10px;
}
上面都是將iframe作爲一個普通元素看待，看的出來，iframe就是一個普通的元素。
三 iframe自適應高度
iframe的自適應高寬是個不小的難題。所謂的iframe高度自適應，一般就是要嵌入的iframe符合以下要求：
1.內嵌的iframe，要適應父頁面，當需要滾動條，滾動條顯示，不需要時，滾動條不顯示。
2.當父頁面窗口發生變化時，iframe也會變化。
3.當iframe的內容變化時，其滾動條也要適應。
首先，不要盲目的去關注這個命題，而應該理解，哪些東西影響了iframe的高寬，iframe在頁面中如何表現。如果對頁面的高度，寬度不不夠了解，經常糊塗，請看筆者的另兩篇文章，頁面的高度發微，頁面的寬度發微。要是做到高寬自適應，無非是在父頁面的窗口大小，文檔大小，iframe元素的高寬，子頁面的窗口大小，文檔大小，等方面下功夫。首先，父頁面是我們編寫的，窗口大小由用戶即瀏覽器決定，文檔大小由頁面內容決定，而子頁面的文檔大小，我們也許不能決定，如果是跨越的。幸好，iframe的自適應高寬無需使用文檔大小。而只需要窗口大小和iframe元素大小，其中窗口大小是隻讀的，所以只需要關心iframe元素大小即可。
頁面的加載順序很重要，一般的，我們使用$(function(){})或window.onload等函數初始化頁面，此時，頁面中所有元素已經加載完畢。如果內嵌了iframe，同樣道理，iframe作爲頁面的一個普通元素，也是先加載完畢，就是說，父頁面的$(function(){})執行時，iframe的所有內容已經加載完畢了。下面是順序圖：
由此，完全不用再iframe裏設置，全部js可以在父頁面完成，而且只要調節iframe元素的width,height,scrolling即可。一般的，自適應iframe,將iframe得scrolling設置爲auto即可。爲了讓頁面上只顯示一個滾動條，還要隱藏父頁面的滾動條。那麼總結起來，要注意以下事項，即可完成iframe的自適應高寬，而且不用關心跨域，跨瀏覽器等問題：
1.隱藏父頁面的（一般爲top）滾動條。
2.設置iframe這個元素的width,height爲某個高寬，scrolling爲auto。
3.設置$(window).resiez()，或$(#XXX).resize()，使容納iframe元素的節點在大小變化時，改變iframe的width,height以適應。
通過以上設置，完全可以做到iframe自適應。此間，不用對iframe中的子頁面做任何設置，只需要在父頁面完成所有程序。之所以這樣，都歸功於iframe的srcolling=auto這句程序最後起作用。示例如下：
1.全屏無邊框：http://www.zangb.com/html/demo/javascript/js_iframe_autoHeight_border.html
2.有邊框效果更明顯：http://www.zangb.com/html/demo/javascript/js_iframe_autoHeight_border.html
四 iframe與無刷新
iframe與無刷新有悠久的關係。筆者不知道ajax以前是如何無刷新的，也許是通過iframe。具體可以參看筆者的另一篇文章：form的target屬性。iframe實現無刷新的原理就是在A頁面的表單提交數據到服務器，並且指定target屬性爲B頁面，服務器返回內容到B頁面，然後在B頁面中調用JavaScript程序，來刷新A頁面，完成一次請求。如果在此過程中，B爲A頁面的一個iframe頁面，而且一直不顯示，則對用戶來說，就是一個無刷新。
這種無刷新比ajax要麻煩，但是同樣意義非凡。在上傳文件時，ajax是無法提交的，此時iframe似乎成了不二選擇。
但是有一個要求，就是AB頁面同域。因爲在整個過程中，會在B頁面來調用A頁面的js對象的方法或函數，就必須保證兩個頁面同域。否則操作非法。這種無刷新在網上隨處可見，淘寶上很多。
五 iframe的跨域
這裏主要講述iframe內html頁面的歸屬。iframe內的html頁面可以有兩個來源，本域內的頁面，外部引用的頁面。我們知道，爲了安全，js是不能訪問其他頁面的對象和方法的，除非兩個頁面同域。這是可以理解的，因爲你不可能希望別人修改引用你的網站時還修改你的網站。
如果有兩段代碼如下：
A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
我們該如何取iframe和子頁面？有以下方法代碼：
var mainIframe = document.getElementById("mainIframe");
var mainIframeW = window.frames["mainIframe"];
var mainDocument = mainIframeW.document;
分別對應到AB頁面是什麼意思呢？我想很多人都不是很清晰。下面表格說明：
| mainIframe | maiIframeW | mainDocument | |
| A代碼 | 頁面的普通元素，可以通過該對象設置iframe的width,height等一個普通元素的屬性,DOM對象 | 子頁面的window對象引用，BOM對象 | 子頁面window對象的文檔模型document，可以在父頁面對子頁面改寫 |
| B代碼 | 同A代碼，DOM對象 | 子頁面的window對象引用，BOM對象 | 子頁面window對象的文檔模型document，不可以在父頁面改寫 |
有一點要說明，如果兩個頁面有一個是其中一個的二級域名，可以通過js的方式設置爲同域名：document.domain = xxx.xx。
六 iframe與jQuery
iframe與jQuery的關係十分簡單。只要理解了一點，即可完全搞清楚：jQuery,$是頁面上的一個js對象，即window的一個普通對象，獲得這個jQuery對象後，就可以進行操作了。jQuery對象屬於頁面，如果要訪問iframe頁面的jQuery對象，首先要保證能夠訪問子頁面的的對象，就是要滿足父頁面與子頁面同域。當然iframe頁面也要引入jquery.js。通常是以下寫法：
1.在父頁面訪問子頁面的jQuery對象。window.frames["xxxIframe"].$("#top")，表示訪問子頁面的top元素。如果拆分開來，會更容易理解即：
var iframe$ = window.frames["xxxIframe"].$;
iframe$("#top");
這裏iframe$就相對於$。
2.在子頁面訪問頁面的jQuery對象。parent.$("#top")。拆分開來就是：
var parent$ = parent.$;
parent$("#top");
如果是頂層框架，就是top.$("#top")。
七 總結
關於iframe的主要知識點就這麼多，如果不夠詳細，請留言。總結如下：
1.iframe就是一個普通的html元素，同樣可以通過css設置其樣式，而起iframe還是一個inline-block元素。
2.只要掌握了父頁面和子頁面的渲染順序，就能很容易掌握iframe的自適應高寬。其實很簡單，在父頁面設置iframe元素的width,height即可，並且scrolling爲auto。
3.iframe的一個獨特用處是，對含有文件上傳表單的無刷新提交。
4.注意如果iframe的內容是外部網址內容，則不能操作其document。
