iframe標簽在網頁中可以創建一個內嵌框架,通過指定src屬性來調用另一個網頁文檔的內容。和frameset一樣,用它來對網頁結構進行拆分以使網頁的某些部分保持公用,但相對frameset對整個網頁進行框架結構的拆分來說,iframe更加靈活,可以內嵌到網頁的任意地方。由于iframe使用上的這個特點,在一些網頁中得到了大量運用,也導致了一些不適宜的濫用。網頁設計將分析一下iframe這個網頁元素常見的幾種使用方式。
onload=”document.f.q.focus();if(document.images)new image().src=’/images/nav_logo4.png’”
這樣一句代碼,加載的圖片nav_logo4.png在首頁并沒有用到,但搜索結果列表等其他頁面使用此圖片的時候只需要從緩存讀取,不需要重新下載了。
除了以上三種應用,對于iframe元素也常見一些不恰當的運用。例如在頁面中嵌入過多的iframe框架,通過指定框架外鏈接標簽的target屬性在點擊時來更新iframe,這種用法和frameset類似,達到共用導航的目的。初衷是好,但其中的弊病也毋庸置疑。這樣會導致一個頁面請求過多,上文所提及的雅虎團隊《best practices for speeding up your web site》一文中就明確優化頁面需要“使iframe的數量最小”,歸納了其三種弊?。?/p>
- 即使內容為空也會造成資源損耗(包括客戶端、服務器端);
- 阻滯頁面onload事件觸發(“blocks page onload”,又有譯作“會阻止頁面加載”,此處存疑)
- 沒有語義(seo是網站營銷的重要組成部分)
在xhtml1.0的下一個版本html5中,由于frameset標簽對網頁可用性方面產生的負面影響,沒有對它提供支持,這也從側面說明一些問題。
另外,由于內嵌的iframe不能自動適應其內部內容大小,為了保持頁面顯示的完整性,還需要編寫一段javascript腳本來根據iframe內容的變化即時調整其大小。分散的多個請求再加上需要javascript腳本來修正更增加了多iframe頁面系統運行的風險。那么,有沒有什么好的方法能保持部分頁面內容公用呢?服務器端早就給我們提供了解決方案,asp中的include,php中的require方法,都是用來包含一段已有的代碼到程序中,這樣同樣能實現頁面的某個部分(如導航菜單、頁腳)公用,但是運行之后作為一個完整的頁面輸出,有效地減少了客戶端請求,同時也不存在iframe的高度自適應的問題。
新聞熱點
疑難解答