HTML 引入了 iframe 节点用于在当前网页中嵌入第三方网站内容。iframe 的作用相当于一个独立的嵌入在页面中的迷你浏览器，如果使用 CSS 进行修饰，你很有可能无法发现这是一个 iframe 节点。iframe 节点内部的内容完全独立于当前的网页，它更像是嵌入在页面上的一个窗口。

你可以通过下面的语法引入它：

<iframe src="hello.html"></iframe>

其中 src 属性指向的是要引入的网页地址，典型的显示效果如下：

默认情况下，iframe 元素的窗口很小，默认只有 300 x 150 的大小，不过可以通过 height 和 width 属性设置嵌入窗口的宽高：

<iframe src="hello.html" width="400" height="200"></iframe>

当然也可以使用 CSS 进行修改：

<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>

删除边框

默认情况下，iframe 有一个很明显的边框，咱们可以通过修改 CSS 的 border 属性，将其移除：

<iframe src="hello.html" style="border: none;"></iframe>

最终的效果是这样的：

因为滚动条存在的原因，会让显示效果感觉四周存在边框，但是和前面对比，你会发现边框已经被移除了。

安全问题

事实上现在大部分网站，除非特殊业务需要，否则如果你直接引入它们的页面，很有可能会看到这样的效果：

上面的图片是我引入百度网站产生的效果，如果你打开浏览器的调试窗口，会发现显示如下的错误：

Refused to display 'https://www.baidu.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

因为现在浏览器为了安全起见引入了很多特殊选项，X-Frame-Options 就是其一。查看网页的请求信息，可以得到下面的数据：

注意看，在 HTTP 的响应信息里，存在一个叫做 X-Frame-Options 的设置项，这是百度的服务器返回的数据，sameorigin 表示只有同源才可以使用 iframe 元素进行嵌入，如果非同源就会出现上面加载错误的画面。

当然这个选项是可以改的，具体的可以查看相关的 MDN 文档，不过咱们显然是没有修改百度官网的权限……。