HTML 框架(iframe)
框架能够将另一个 HTML 页面嵌入到当前页面中。
每个通过iframe嵌入的页面都有自己的会话历史记录和DOM树。
<iframe src="https://rucoding.com/" title="入扣网"></iframe>
警告
页面上的每个<iframe>
都需要增加内存和其他计算资源,这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>
,但是你最好还是先看看这么做会不会导致某些性能问题。
嵌入一个页面
src
设置页面地址,可以是绝对地址,也可以是相对地址。
<!--相对地址-->
<iframe width="97%" height='280' src="/learn/html" title="HTML5 教程"></iframe>
高度和宽度
可以使用<iframe>
的width
和height
属性设置:
<!--绝对地址-->
<iframe width="96%" height="260" src="https://rucoding.com/" title="入扣网"></iframe>
也可以使用CSS的width
和height
属性设置:
<iframe style="width:96%;height:260px" src="https://rucoding.com/" title="入扣网"></iframe>
去掉边框
默认情况下,iframe 周围有边框。
若要删除边框,可以使用 CSS border
属性:
<iframe style="border:none;" src="/learn/html/base/element"></iframe>
若要修改边框大小及颜色和样式,同样可以使用 CSS border
属性:
<iframe style="border:2px solid blue;" src="/learn/html/base/element" ></iframe>
链接的目标
iframe
可用作链接的目标框架。
链接的target
属性必须设置为 iframe
的name
属性:
<p><a href="https://www.rucoding.com" target="webiframe">rucoding.com</a></p>
<iframe src="about:blank" name="webiframe"></iframe>
内容安全策略
在现代浏览器中,为了避免点击劫持攻击,iframe无法加载非同源网站的网页,只能加载同源的网站页面。 详细参考 Content-Security-Policy和X-Frame-Options
HTML 参考
名称 | 描述 |
---|