跳到主要内容

HTML 框架(iframe)

框架能够将另一个 HTML 页面嵌入到当前页面中。

每个通过iframe嵌入的页面都有自己的会话历史记录和DOM树。


<iframe src="https://rucoding.com/" title="入扣网"></iframe>

about:blank
警告

页面上的每个<iframe>都需要增加内存和其他计算资源,这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>,但是你最好还是先看看这么做会不会导致某些性能问题。

嵌入一个页面

src设置页面地址,可以是绝对地址,也可以是相对地址。

<!--相对地址-->
<iframe width="97%" height='280' src="/learn/html" title="HTML5 教程"></iframe>

about:blank

高度和宽度

可以使用<iframe>widthheight属性设置:

<!--绝对地址-->
<iframe width="96%" height="260" src="https://rucoding.com/" title="入扣网"></iframe>

about:blank

也可以使用CSS的widthheight属性设置:


<iframe style="width:96%;height:260px" src="https://rucoding.com/" title="入扣网"></iframe>

about:blank

去掉边框

默认情况下,iframe 周围有边框。

若要删除边框,可以使用 CSS border 属性:


<iframe style="border:none;" src="/learn/html/base/element"></iframe>

about:blank

若要修改边框大小及颜色和样式,同样可以使用 CSS border 属性:


<iframe style="border:2px solid blue;" src="/learn/html/base/element" ></iframe>

about:blank

链接的目标

iframe 可用作链接的目标框架。

链接的target属性必须设置为 iframename属性:

<p><a href="https://www.rucoding.com" target="webiframe">rucoding.com</a></p>
<iframe src="about:blank" name="webiframe"></iframe>

about:blank

内容安全策略

在现代浏览器中,为了避免点击劫持攻击,iframe无法加载非同源网站的网页,只能加载同源的网站页面。 详细参考 Content-Security-PolicyX-Frame-Options

HTML 参考

名称描述