HTML中的iframe简介

介绍

iframe是HTML中的一个标签，用于在网页中嵌入另外一个网页或者文档。它可以将一个网页嵌入到另一个网页中的指定区域，形成一个内嵌的框架，使得用户可以同时浏览多个网页。

功能

使用iframe可以实现以下功能：

• 1 嵌入其他网页：通过使用iframe,可以将其他网页的内容嵌入到当前网页中。这对于集成第三方内容(如地图、视频、社交媒体插件等)非常有用。

• 2 分割网页：通过将网页分割成多个iframe，可以在一个网页中同时显示多个独立的内容区域。这在设计复杂布局或创建多个独立模块的网页时非常有用。

• 3 加载外部内容：可以使用iframe加载来自其他域的内容。这在需要显示来自其他网站的内容时非常有用，例如嵌入广告或显示外部信息。

实例

我们使用一张地图放入到内嵌页面iframe中，其中iframe包含id、title、width、height以及src属性。效果如下：

添加语法

使用iframe的语法如下：
<iframe src="URL" frameborder="0" width="400" height="300"></iframe>

属性

属性	值	描述
src	URL	指定了要嵌入的网页的URL地址;
frameborder	1(默认) 0	值为1时,显示此框架的边框。值为0时移除边框。此属性已不赞成使用,请使用 CSS 属性 border 代替。
width和height	像素	设置iframe的宽度和高度(建议在css设置);
name	文本	指定iframe的名称,可以用于在其他地方引用该iframe。该名称可以用作<a>标签与 <form> 标签的 target 属性值,也可以用作 <input> 标签和<button> 标签的 formtarget 属性值,还可以用作 window.open() 方法的 windowName 参数值;
allow		用于为<iframe>指定其特征策略.
scrolling	auto yes no	设置是否显示滚动条,可选值有auto(仅当框架的内容超出框架的范围时显示滚动条)、yes(始终显示滚动条)、no(从不显示滚动条);
sandbox	allow-forms; allow-modals; allow-orientation-lock; allow-pointer-lock; allow-popups; allow-popups-to-escape-sandbox; allow-scripts; allow-top-navigation;	允许嵌入的窗口提交表单; 允许嵌入的页面打开模态窗口; 允许嵌入的页面锁定屏幕方向; 允许嵌入的页面使用 Pointer Lock API; 允许弹窗; 允许沙箱化的文档打开新窗口,并且新窗口不会继承沙箱标记; 允许嵌入的页面运行脚本(但不能创建弹窗); 允许嵌入的页面导航(加载)内容到顶级的页面;
important	auto high low	表示 <iframe> 的 src 属性指定的资源的加载优先级。允许的值有：auto(不指定优先级。浏览器根据自身情况决定资源的加载顺序)、high(资源的加载优先级较高)、low(资源的加载优先级较低);
srcdoc	HTML 代码	规定要在 <iframe> 中显示的页面的 HTML 内容;
referrerpolicy	no-referrer; no-referrer-when-downgrade; origin; origin-when-cross-origin; same-origin; strict-origin; unsafe-url;	不发送 Referer 首部; 向不受 TLS (HTTPS) 保护的 origin 发送请求时,不发送 Referer 首部; referrer 首部中仅包含来源页面的源。换言之,仅包含来源页面的 scheme, host, 以及 port; 发起跨域请求时,仅在 referrer 中包含来源页面的源。发起同源请求时,仍然会在 referrer 中包含来源页面在服务器上的路径信息; 对于 same origin（同源）请求,发送 referrer 首部,否则不发送; 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部; 始终在 referrer 首部中包含源以及路径（但不包括 fragment,密码,或用户名）。这个值是不安全的, 因为这样做会暴露受 TLS 保护的资源的源和路径信息;

注意事项

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

引用来源

本文创作参考于MDN，点此链接快速跳转。

结语

本人萌新，文章如有不足之处欢迎各位大佬指点。