iframe標(biāo)記常見(jiàn)的幾種使用方法發(fā)布者：本站     時(shí)間：2020-05-16 08:05:29

iframe標(biāo)簽在網(wǎng)頁(yè)中可以創(chuàng)建一個(gè)內(nèi)嵌框架，通過(guò)指定src屬性來(lái)調(diào)用另一個(gè)網(wǎng)頁(yè)文檔的內(nèi)容。

和frameset一樣，用它來(lái)對(duì)網(wǎng)頁(yè)結(jié)構(gòu)進(jìn)行拆分以使網(wǎng)頁(yè)的某些部分保持公用，但相對(duì)frameset對(duì)整個(gè)網(wǎng)頁(yè)進(jìn)行框架結(jié)構(gòu)的拆分來(lái)說(shuō)，iframe更加靈活，可以內(nèi)嵌到網(wǎng)頁(yè)的任意地方。

由于iframe使用上的這個(gè)特點(diǎn)，在一些網(wǎng)頁(yè)中得到了大量運(yùn)用，也導(dǎo)致了一些不適宜的濫用。

分析一下iframe這個(gè)網(wǎng)頁(yè)元素常見(jiàn)的幾種使用方式。

1.制作“無(wú)刷新”響應(yīng)頁(yè)面組件，作為異步交換數(shù)據(jù)的一種解決方案。

這是早期不使用Ajax來(lái)異步發(fā)送請(qǐng)求的一種替代方法，通過(guò)在頁(yè)面上設(shè)置不可見(jiàn)的iframe元素，并將其src屬性指向需要發(fā)送請(qǐng)求的頁(yè)面地址來(lái)發(fā)送請(qǐng)求，同域下可以再對(duì)返回的頁(yè)面進(jìn)行DOM解析來(lái)獲取數(shù)據(jù)。

另外一個(gè)好處在于繞開(kāi)了Ajax的沙箱安全模型，可以順利發(fā)送跨域請(qǐng)求獲得數(shù)據(jù)，只是這種情況下取不到iframe的document對(duì)象。

因?yàn)樗倪@個(gè)特點(diǎn)，在某些需要跨域請(qǐng)求數(shù)據(jù)的網(wǎng)頁(yè)中依然有應(yīng)用。

這種無(wú)刷新是指在數(shù)據(jù)交換過(guò)程中父頁(yè)面不刷新而繼續(xù)對(duì)用戶操作保持響應(yīng)，實(shí)際進(jìn)行數(shù)據(jù)交換而被鎖定的是父頁(yè)面上內(nèi)嵌的iframe頁(yè)面。

這個(gè)內(nèi)嵌iframe頁(yè)面根據(jù)需要設(shè)置為可見(jiàn)或不可見(jiàn)都可以，并不會(huì)影響父頁(yè)面中的其他元素對(duì)用戶的響應(yīng)。

這種效果類似Ajax的無(wú)刷新，但可以看出其機(jī)制是完全不同的。

即使Gmail作為Ajax應(yīng)用的典范，也結(jié)合了很多iframe來(lái)實(shí)現(xiàn)其優(yōu)越的性能與用戶體驗(yàn)。

2.優(yōu)化頁(yè)面的一種方式。

使用iframe可以并行加載腳本，解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題。

Google的廣告平臺(tái)AdSense即通過(guò)iframe在用戶的站點(diǎn)上投放廣告分享收益，查看分析國(guó)內(nèi)門(mén)戶首頁(yè)上的廣告代碼也能看到這類技術(shù)。

也可用隱藏的iframe在網(wǎng)絡(luò)壓力較小的時(shí)候來(lái)預(yù)加載比較大的文件到緩存，以便其他頁(yè)面使用。

預(yù)加載的概念可以用firebug分析google首頁(yè)，在body標(biāo)簽里可以看到：

onload=”document.f.q.focus();if(document.images)new Image().src=’/images/nav_LOGO4.png’”

這樣一句代碼，加載的圖片nav_logo4.png在首頁(yè)并沒(méi)有用到，但搜索結(jié)果列表等其他頁(yè)面使用此圖片的時(shí)候只需要從緩存讀取，不需要重新下載了。

3.作為針對(duì)IE6瀏覽器中浮動(dòng)層遮不住select控件和Flash元素的一種修正(hack)方式。

Web2.0時(shí)代lightbox（又或thickbox）技術(shù)以它良好的體驗(yàn)與清新的視覺(jué)感受成為一種流行效果。

這種技術(shù)實(shí)際上是用一個(gè)絕對(duì)定位的浮動(dòng)層覆蓋到原有頁(yè)面上，用以呈現(xiàn)文本信息、圖片、表單或其他任意頁(yè)面元素，替代了早期web開(kāi)發(fā)中常使用彈出瀏覽器窗口或者瀏覽器自身的消息、輸入控件來(lái)與用戶進(jìn)行交互的方式。

舊有方式中，彈出新窗口的腳本經(jīng)常會(huì)被瀏覽器的廣告攔截系統(tǒng)攔截，而瀏覽器自身的消息控件因?yàn)闀?huì)打斷瀏覽器進(jìn)程，導(dǎo)致瀏覽器中本頁(yè)面以及其他通過(guò)多標(biāo)簽進(jìn)行瀏覽的網(wǎng)頁(yè)全部被鎖死而受到用戶體驗(yàn)研究者的詬病。

作為對(duì)自己有嚴(yán)格要求的一線web前端開(kāi)發(fā)人員，在動(dòng)手實(shí)現(xiàn)lightbox效果的過(guò)程中一定會(huì)遇到這個(gè)問(wèn)題，絕對(duì)定位的層在IE6中遮蓋不了網(wǎng)頁(yè)上的select控件和flash，即使樣式設(shè)置較高的z-index值也無(wú)濟(jì)于事。

這是因?yàn)閟elect元素在IE6中是一個(gè)窗體級(jí)別的元素，它的優(yōu)先級(jí)大大高于其他所有的HTML標(biāo)簽，只有同樣窗體級(jí)別的iframe才能遮住它。

因此開(kāi)發(fā)者們研究出，把浮動(dòng)層放到iframe中，或者在浮動(dòng)層中放置一個(gè)iframe就可以解決此問(wèn)題了。

所幸此問(wèn)題在IE6以后的IE升級(jí)版本中得到了修正，但對(duì)于還擁有50%+市場(chǎng)占有率的IE6來(lái)說(shuō)（統(tǒng)計(jì)截至發(fā)文時(shí)間），這個(gè)解決方案依然有現(xiàn)實(shí)意義。

除了以上三種應(yīng)用，對(duì)于iframe元素也常見(jiàn)一些不恰當(dāng)?shù)倪\(yùn)用。

例如在頁(yè)面中嵌入過(guò)多的iframe框架，通過(guò)指定框架外鏈接標(biāo)簽的target屬性在點(diǎn)擊時(shí)來(lái)更新iframe，這種用法和frameset類似，達(dá)到共用導(dǎo)航的目的。

初衷是好，但其中的弊病也毋庸置疑。

這樣會(huì)導(dǎo)致一個(gè)頁(yè)面請(qǐng)求過(guò)多，上文所提及的雅虎團(tuán)隊(duì)《Best Practices for Speeding Up Your Web Site》一文中就明確優(yōu)化頁(yè)面需要“使iframe的數(shù)量最小”，歸納了其三種弊?。?/span>

即使內(nèi)容為空也會(huì)造成資源損耗(包括客戶端、服務(wù)器端)；

阻滯頁(yè)面onload事件觸發(fā)（“Blocks page onload”，又有譯作“會(huì)阻止頁(yè)面加載”，此處存疑）

沒(méi)有語(yǔ)義（SEO是網(wǎng)站營(yíng)銷(xiāo)的重要組成部分）

在XHTML1.0的下一個(gè)版本HTML5中，由于frameset標(biāo)簽對(duì)網(wǎng)頁(yè)可用性方面產(chǎn)生的負(fù)面影響，沒(méi)有對(duì)它提供支持，這也從側(cè)面說(shuō)明一些問(wèn)題。

另外，由于內(nèi)嵌的iframe不能自動(dòng)適應(yīng)其內(nèi)部?jī)?nèi)容大小，為了保持頁(yè)面顯示的完整性，還需要編寫(xiě)一段JavaScript腳本來(lái)根據(jù)iframe內(nèi)容的變化即時(shí)調(diào)整其大小。

分散的多個(gè)請(qǐng)求再加上需要JavaScript腳本來(lái)修正更增加了多iframe頁(yè)面系統(tǒng)運(yùn)行的風(fēng)險(xiǎn)。

那么，有沒(méi)有什么好的方法能保持部分頁(yè)面內(nèi)容公用呢？服務(wù)器端早就給我們提供了解決方案，ASP中的include，PHP中的require方法，都是用來(lái)包含一段已有的代碼到程序中，這樣同樣能實(shí)現(xiàn)頁(yè)面的某個(gè)部分（如導(dǎo)航菜單、頁(yè)腳）公用，但是運(yùn)行之后作為一個(gè)完整的頁(yè)面輸出，有效地減少了客戶端請(qǐng)求，同時(shí)也不存在iframe的高度自適應(yīng)的問(wèn)題。