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