框架元素 iframe 是一個 inline-block 元素。還記得 inline-block 元素的特點嗎？如果不記得去復(fù)習(xí)一下區(qū)塊元素。

介紹

通過框架元素，我們可以在一個瀏覽器窗口顯示多個頁面。

簡單來說，就是把另一個頁面嵌入到當(dāng)前頁面。

比如說在 a.html 頁面顯示，嵌入 b.html 頁面。這里的 b.html 頁面，可以是自己網(wǎng)站的，也可以是互聯(lián)網(wǎng)上其它網(wǎng)站的頁面。

顯示自己網(wǎng)站其它頁面

<iframe src="2-8-1.html"></iframe> 

可以看到，通過框架元素，我們把前一節(jié)的頁面，顯示在了框架里。

顯示其它網(wǎng)站頁面

<iframe src="https://movie.douban.com/top250?start=0&filter="></iframe> 

同樣的，我們可以使用框架元素，嵌入其它網(wǎng)站頁面。這里拿豆瓣的某個頁面做一個示例。

樣式

默認(rèn)的框架樣式，是可以修改的。

設(shè)置高度與寬度

<iframe src="2-8-1.html" width="600" height="400"></iframe> 

通過屬性 width 和 height，我們可以指定邊框的寬度和高度。

當(dāng)內(nèi)容寬度和高度小于框架時，滾動條默認(rèn)就不顯示了。

邊框

<iframe src="2-8-1.html" width="600" height="400" frameborder="0"></iframe> 

通過 frameborder 屬性，去掉了框架的邊框，這樣的嵌入看起來和當(dāng)前網(wǎng)頁一樣，基本上看不出來是另一個頁面，這為整體頁面的樣式和風(fēng)格提供很好的融合。

使用框架顯示鏈接網(wǎng)頁內(nèi)容

前面在講 a 標(biāo)簽時，說過 a 標(biāo)簽的屬性 target 用于指定當(dāng)點擊了鏈接時，鏈接內(nèi)容顯示在什么地方。

之前講了兩種，默認(rèn)在當(dāng)前窗口打開，通過指定值為_blank 會在新頁面打開。

這里我們有另一個選項，通過指定值為 iframe 元素的 name，可以在當(dāng)前頁面的框架區(qū)域打開。

<a href="2-8-1.html" target="contentcontainer"   >點擊在iframe中打開頁面2-8-1.html</a > <iframe name="contentcontainer" src="" width="600" height="400"></iframe> 

上述代碼默認(rèn)展示為下

當(dāng)點擊了鏈接之后，顯示如下：

可以看到原本應(yīng)該在瀏覽器窗口打開的網(wǎng)頁，在框架里打開了。

拒絕網(wǎng)頁被嵌入框架

前面咱們在自己的網(wǎng)頁中嵌入了豆瓣的某個網(wǎng)頁，那如果豆瓣不希望其它人通過這種方便嵌入它的網(wǎng)頁，能實現(xiàn)嗎？

答案是肯定的，只是這實現(xiàn)不能直接在 html 頁面里，而且需要通過在 http 請求的 header 里指定屬性 X-Frame-Options 的值。

它有兩個值可選 DENY 和 SAMEORIGIN，當(dāng)值 被指定為 DENY 時，這個網(wǎng)頁就不能被當(dāng)前網(wǎng)站之外的其它網(wǎng)站嵌入到 iframe 中。

由于此部分內(nèi)容涉及到 HTTP 請求，在這里不展開細(xì)說，作為對于 iframe 元素的了解，大家知道我們有辦法能不讓其它站點引用就可以了。

總結(jié)

• ?? iframe 是一個 inline-block 元素，可以通過 自身的屬性以及 CSS 指定樣式。

• ?? iframe 可以嵌入當(dāng)前站點的網(wǎng)頁，也可以嵌入其它站點的網(wǎng)頁。

• ?? iframe 可以作為鏈接的目標(biāo)顯示區(qū)域，打開鏈接指定的地址頁面。