深刻理解iframe

http://www.cnblogs.com/fangjins/archive/2012/08/19/2645631.html

一 目的

　　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。