日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

框架元素 iframe 是一個 inline-block 元素。還記得 inline-block 元素的特點嗎？如果不記得去復習一下區塊元素。

介紹

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

簡單來說，就是把另一個頁面嵌入到當前頁面。

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

顯示自己網站其它頁面

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

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

顯示其它網站頁面

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

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

樣式

默認的框架樣式，是可以修改的。

設置高度與寬度

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

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

當內容寬度和高度小于框架時，滾動條默認就不顯示了。

邊框

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

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

使用框架顯示鏈接網頁內容

前面在講 a 標簽時，說過 a 標簽的屬性 target 用于指定當點擊了鏈接時，鏈接內容顯示在什么地方。

之前講了兩種，默認在當前窗口打開，通過指定值為_blank 會在新頁面打開。

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

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

上述代碼默認展示為下

當點擊了鏈接之后，顯示如下：

可以看到原本應該在瀏覽器窗口打開的網頁，在框架里打開了。

拒絕網頁被嵌入框架

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

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

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

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

總結

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

• ?? iframe 可以嵌入當前站點的網頁，也可以嵌入其它站點的網頁。

• ?? iframe 可以作為鏈接的目標顯示區域，打開鏈接指定的地址頁面。