HTML iframe

HTML iframe

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

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

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

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

HTML iframe

默认情况下,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>

最终的效果是这样的:

iframe 删除边框

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

安全问题

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

iframe 打开失败

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

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

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

X-Frame-Options 头

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

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

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top