一個容易被忽視的標籤 —— iframe_一條會coding的Shark

theme: smartblue

前言

甲問：說說你知道的HTML標籤。

乙於是說了一大堆標籤，比如div，span等等。

甲說：那你知道 iframe 標籤嗎？

乙這時候遲疑了片刻，緩緩說出：知道它，但是不太瞭解這個標籤。

HTML裡有很多標籤，比如head，body，text，p，section等等，這些都是很常用的標籤。但是今天的主角並不是它們，而是一個貌似看起來不起眼的標籤 iframe。我問了我身邊很多朋友，“說聽過，但是沒怎麼用到過” 是大部分人的回答，實際上確實如此，如今已經是HTML5時代了，由於 iframe 可能在某些方面不符合標準網頁設計的理念，已經被HTMLl5拋棄，目前的HTML5不再支援它了。

iframe 介紹

雖然這個標籤在HTML5中不被支援，但是我也在某些專案中偶然間發現了它的存在，也因此去專門瞭解了它的相關知識。不瞭解不知道，一瞭解才發現原來網站上的嵌入廣告就是通過它來實現的。

我們經常可以在一些網站上看到廣告，網站引入廣告是很正常的事。而將廣告放在網頁上的做法就是使用 iframe 引入廣告地址就可以了，所以說這個標籤並不是所謂的看起來不起眼，而是我們對它的瞭解不夠，一旦瞭解了，會發現很多地方都有它的身影。

那麼，使用 iframe 來進行設定廣告有什麼好處呢？通過查閱資料得知，用它來加入廣告可以減少網頁佈局的紊亂，也可以增加網頁的安全性。

iframe 應用

聊了這麼多理論知識，我們來應用一下這個標籤吧，下面是我用 iframe 寫的一個 demo，我在 iframe 標籤裡放入掘金的網址，便可以在網頁中嵌入掘金網頁。 ```

Document

``` 效果如下：

但是，我們也會發現有些網址會無法訪問，比如baidu.com，效果如下： ```

```

這是為什麼呢？我首先想到的是產生了跨域，然後檢視後臺我們可以看到如下錯誤：

這個錯誤也印證了我的猜想。對於 iframe 產生的跨越，有很多解決方法，大家可以在網上查閱相關資料。

iframe 的優缺點

iframe 之所以這麼容易被忽視，其中一個很大的原因就是它產生的一些缺點問題。這裡整理了部分 iframe 的優缺點。

優點： - 可以減少資料的傳輸，減少網頁的載入時間 - 使用起來很方便 - 方便開發，減少程式碼的重複率

缺點： - 部分使用會產生跨域（如上所示） - 會產生很多的頁面，不易於管理 - 瀏覽器的後退按鈕無效

iframe 常用屬性

height:框架作為一個普通元素的高度
width:框架作為一個普通元素的寬度
name:框架的名稱
scrolling:框架是否滾動
src：框架的地址，可以使用頁面地址，也可以是圖片的地址。
frameborder:是否顯示邊框
...

總結

iframe 中文翻譯過來就是框架的意思，iframe 標籤規定一個內聯框架。內聯框架就是在一個頁面中嵌入另一個頁面。

有很多網頁看上去是一個網頁，但實際上它其中可能鑲嵌有其它網頁，iframe 標籤就可以把其它網頁無縫地嵌入在一個頁面中。

總之，這個看起來不起眼、容易忽視、被HTML5拋棄的標籤，被應用到的地方可真不少。