HTML iframe
- W_Z_C
- 共 739 字,阅读约 2 分钟
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 文档,不过咱们显然是没有修改百度官网的权限……。