淺談iframe

昨天在一家公司的筆試題中遇到一道題目：

*iframe有那些缺點？*

我這，徹底不知道怎麼答啊，雖然有遇到過這道題，但是在實際開發中沒有用到過iframe，我當時粗略看了下答案也沒記住……雖然不知道之後開發會不會用到，可是秉着遇到就不要放過的思想我決定了解一下

關於iframe

下面是W3School對<iframe>的定義：
*iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）。*

其實我也不太明白這個什麼意思，不過按個人理解就是：iframe提供了一個簡單的方式吧一個網站的內容嵌入到另外一個網站中。 
 
那iframe通常用在什麼方面呢？

目前用得最多的是管理後臺類網站，左邊一個菜單list，右邊就是iframe的tabs,能夠隨時打開、關閉頁面。在這種系統中，若是把iframe替換成div，那麼大量頁面中相同類型的表格、表單等就要用不一樣的id、class。由於js是針對body下的全部對象的，因此這種系統用iframe比較好。能夠在iframe裏面自由使用js和標籤id的定義，並且父頁面和菜單列表通常不會刷新，因此iframe帶來的內容也就和通常頁面的刷新同樣。
  
若是咱們須要獨立的瀏覽上下文，那就用iframe，不然不用。

*iframe常被用於複用部分界面，比較早期的網站使用 iframe，主要是用於導航欄（navigator）。爲何？*

由於一個網站不少頁面的導航欄部分是相同的，在避免切換頁面的時候重複下載，將導航欄和正文分開在 iframe 中，是一個方便的作法。同時帶來的不利是，默認狀況下，使用了 iframe 的網站的 URL 不會隨着頁面的變化而變化。這就意味着一旦刷新，網站可能又回到首頁。

*那麼如今何時會用到 iframe 呢？*

由於 iframe 的頁面和父頁面（parent）是分開的，因此它意味着，這是一個獨立的區域，不受 parent 的 CSS 或者全局的 JavaScript 的影響。典型的，好比所見即所得的網頁編輯器（WYSIWYG Online HTML Editor），由於它們須要 reset 本身的 CSS 到本身的標準，而不被 parent CSS 的 override。

使用 iframe 是否是一個好的用法（good practice），不能一律而論，可是能夠確定是，如今的大部分網站避免採用這種方式的。

iframe的優勢

• 隔離上下文，便於更改，模塊分離

iframe的缺點

• spider比較抓取到iframe裏的內容，所以seo優化常常用div代替frame

• iframe會阻塞主頁面的Onload事件

• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

目前國內那些網站用到iframe

• QQ郵箱

• 網易雲音樂底部的播放條

• W3School的代碼測試頁面

參考自：知乎問答-Iframe 有什麼好處，有什麼壞處？國內還有哪些知名網站仍用Iframe，爲何？有哪些原來用的如今拋棄了？又是爲何？