關於內聯框架
作者：Dante Fung
WHAT?
概述
內聯框架（inner frame），是一個非常有用的標簽，早期用它來模擬Ajax效果，使用iframe可以在一個表格內調用一個外部文件，非常有用。現在在富本文編輯器開發中它也舉足輕重。
它又是一個特別的元素，最早出現IE4.0中，后紛紛被其他游覽器吸納，由於IE不開源，iframe在各游覽器中都有很大差異。
WHY?
1.復用
比較早期的網站使用 iframe，主要是用於導航欄（navigator）。為什么？
問題1：一個網站很多頁面的導航欄部分是相同的，在避免切換頁面的時候重復下載。
解決方案：將導航欄和正文分開在 iframe 中。
問題2：默認情況下，使用了 iframe 的網站的 URL 不會隨着頁面的變化而變化意味着一旦刷新，網站可能又回到首頁。
解決方案：不同后台技術都有自己的方法，比如 ASP 有 SSI，PHP 有 require、require_once 或 include 函數，JSP 也有 include 指令。
優點：解決不同頁面使用相同的 navigator 而避免重復編碼。
2.標准規范規范之一
iframe 一直是瀏覽器標准規范之一，只有很早期的瀏覽器不支持 iframe，現在幾乎已絕跡。所以從兼容性上來說，iframe 是沒問題的。
WHEN?
1.網頁編輯器（WYSIWYG Online HTML Editor）
2.富文本編輯器
3.引入其他頁面（我們現在用到的）
為什么？
沙箱隔離（sandbox）機制
iframe 等於新建了一個全新的，不受 parent 影響的頁面上下文。
iframe 的頁面和父頁面（parent）是分開的，它意味着，這是一個獨立的區域，不受 parent 的 CSS 或者全局的 JavaScript 的影響。
HOW?
Step1:API
1.HTML
常用屬性說明：
src：文件的路徑，既可是HTML文件，也可以是文本、ASP等；
width、height："內部框架"區域的寬與高；
scrolling：當SRC的指定的HTML文件在指定的區域不顯不完時，滾動選項；
如果為 NO，則不出現滾動條；
如果為Yes，則顯示;
如果為 Auto：則自動出現滾動條
FrameBorder：設置或獲取是否顯示框架的邊框。(1，0 或 no，yes)
name：框架的名字，用來進行識別。
2.HTML DOM
Step2:implements
最佳實踐（Good Practice）-- -- 用圖說話：
為什么我要把內聯的那個框架叫做子窗口？
查閱w3cschool文檔知：
既然內聯框架在API文檔內也叫window，所以我就直接叫它為窗口了，基於其有嵌套關系的原因，因此，確切來說，應該叫子窗口。
那么，iframe這塊區域的子窗口就應該跟普通窗口一樣的功能：
1.頁面的轉發和重定向都在該窗口內進行。只不過框架這個子窗口不像父窗口有明顯的地址欄可以看到地址的變化。
2.window對象的所有屬性和值還有事件都是一樣的。
常見的問題：
1.有關高度自適應問題
2.通過iframe訪問主頁面通過iframe訪問主頁面
優缺點：
iframe的優點：
1.iframe能夠原封不動的把嵌入的網頁展現出來。
2.如果有多個網頁引用iframe，那么你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
3.網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。
4.如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。
iframe的缺點：
1.會產生很多頁面，不容易管理。
2.iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。
3.代碼復雜，無法被一些搜索引擎索引到，這一點很關鍵，現在的搜索引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜索引擎優化。
4.很多的移動設備（PDA 手機）無法完全顯示框架，設備兼容性差。
5.iframe框架頁面會增加服務器的http請求，對於大型網站是不可取的。
替代方案：
1.用Ajax來代替iframe。
2.不同后台技術都有自己的方法。例如：JSP 也有 include 指令。JSP動作標簽動態引入。
參考資料：
【1】https://www.zhihu.com/question/20653055/answer/15751248
【2】http://www.cnblogs.com/rubylouvre/archive/2009/08/01/1536710.html
【3】http://www.cnblogs.com/xugang/archive/2008/02/16/1070431.html
【4】http://www.lingdublog.com/113.html
