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

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

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

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

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

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

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

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

因為它的這個(gè)特點(diǎn)，在某些需要跨域請求數據的網(wǎng)頁(yè)中依然有應用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這是因為select元素在IE6中是一個(gè)窗體級別的元素，它的優(yōu)先級大大高于其他所有的HTML標簽，只有同樣窗體級別的iframe才能遮住它。

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

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

除了以上三種應用，對于iframe元素也常見(jiàn)一些不恰當的運用。

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

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

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

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

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

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

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

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

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

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