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

介紹

通過(guò)框架元素，我們可以在一個(gè)瀏覽器窗口顯示多個(gè)頁(yè)面。

簡(jiǎn)單來(lái)說(shuō)，就是把另一個(gè)頁(yè)面嵌入到當(dāng)前頁(yè)面。

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

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

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

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

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

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

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

樣式

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

設(shè)置高度與寬度

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

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

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

邊框

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

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

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

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

之前講了兩種，默認(rèn)在當(dāng)前窗口打開(kāi)，通過(guò)指定值為_(kāi)blank 會(huì)在新頁(yè)面打開(kāi)。

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

<a href="2-8-1.html" target="contentcontainer"   >點(diǎn)擊在iframe中打開(kāi)頁(yè)面2-8-1.html</a > <iframe name="contentcontainer" src="" width="600" height="400"></iframe> 

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

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

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

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

前面咱們?cè)谧约旱木W(wǎng)頁(yè)中嵌入了豆瓣的某個(gè)網(wǎng)頁(yè)，那如果豆瓣不希望其它人通過(guò)這種方便嵌入它的網(wǎng)頁(yè)，能實(shí)現(xiàn)嗎？

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

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

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

總結(jié)

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

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

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