iframe
經典真題
- iframe 框架有哪些優缺點？
- iframe 用來干什么的
iframe 介紹
iframe 稱之為嵌入式框架，嵌入式框架可以把一個完整的網頁內容嵌入到現有的網頁中。
下面是一個 iframe 的簡單示例：
<body><p>iframe 示例</p><iframe src="https://juejin.cn/"></iframe>
</body>
效果：
可以看到，在當前的網頁，又嵌入了一個其他頁面。
那么這在實際開發中有啥意義呢？
實際上，在早期的時候， iframe 在開發中用得很多。使用 iframe 可以很方便的制作一個頁面的公共部分，例如導航欄。
現在仍然能夠找到使用 iframe 的網站（大多是舊的項目）
例如 W3C school：
再比如郵箱：
但是隨著 Ajax 的出現，iframe 用得越來越少了。現在在某些特定的場景還能見到，比如模擬窗口，郵箱或者 HTML 在線編輯器等。
究其原因，是因為 iframe 有種種不便，比如一個直觀的問題就是 iframe 的自適應高度，這是處理起來比較麻煩的問題，隨便百度下都是一大串的代碼。
另外還有個重大的缺點，那就是搜索引擎的“爬蟲”程序無法解讀這種頁面，當“爬蟲”遇到多個頁面嵌套的網頁時只看到框架卻找不到鏈接，然后認定此網站是死站點并離開。這對于 SEO 來講無疑是毀滅性的打擊。并且使用大量的 iframe 標簽也會稀釋你該頁面的關鍵詞密度并對其產生影響。
真題解答
- iframe 用來干什么的？有哪些優缺點？
參考答案：
iframe 也稱作嵌入式框架，嵌入式框架和框架網頁類似，它可以把一個網頁的框架和內容嵌入在現有的網頁中。
優點
- 重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數據的傳輸，增加了網頁下載速度)
- 方便制作導航欄
缺點
- 會產生很多頁面，不容易管理
- 調用外部頁面，需要額外調用 CSS，給頁面帶來額外的請求次數
- 會阻塞頁面的加載，window 的 onload 事件需要在所有 iframe 加載完畢后(包含里面的元素)才會觸發
- 瀏覽器的后退按鈕無效
- 無法被一些搜索引擎索引到
- 多數小型的移動設備（PDA 手機）無法完全顯示框架
由于上面諸多缺點，因此不符合標準網頁設計的理念，已經被標準網頁設計拋棄，目前框架的所有優點完全可以使用 Ajax 實現，因此已經沒有必要使用 iframe 框架了。
-EOF-
