框架元素 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 可以作为链接的目标显示区域，打开链接指定的地址页面。