1、基本用法
HTML 中的 <iframe> 标签用于在当前页面中嵌入另一个文档。它相当于一个窗口，可以显示指定的网页。用法如下，
<iframe src="url" title="description">
</iframe>
属性说明：
属性 | 描述 |
src | 指定要在iframe中显示的文档的URL。 |
title | 为iframe提供标题，增强可访问性。 |
2、常见属性
HTML <iframe> 元素用于在当前HTML文档中嵌入另一个文档。这通常用于嵌入第三方内容，如视频、地图或交互式内容。<iframe> 元素具有多个属性，可用于配置其行为和外观。
属性 | 描述 |
src | 指定要在框架中显示的页面的URL。 这是最重要的属性， 因为它定义了 |
width、height | 用于指定 可以是像素值或百分比。 |
name | 给 这样可以通过目标（
|
frameborder | 指定是否显示 在HTML5中已不推荐使用， 推荐使用CSS控制边框。 |
scrolling | 指定 值可以是"yes"、"no" 或 "auto" 。在HTML5中已不推荐使用， 推荐使用CSS控制滚动。 |
sandbox | 为嵌入的内容提供额外的安全限制， 如防止表单提交、阻止脚本执行等， 从而增强安全性。 |
allowfullscreen | 允许 适用于视频和游戏等媒体内容。 |
srcdoc | 允许直接在 而不是通过 |
allow | 用于指定 可以使用哪些浏览器特性或API， 例如全屏、摄像头和麦克风等。 |
loading | 控制浏览器是否应该懒加载 即仅当用户滚动到视图中时才加载内容。 有效值包括 "eager" 和 "lazy" 。 |
3、设置尺寸
可以通过直接在 <iframe> 标签中设置 width 和 height 属性来控制尺寸，或者使用 CSS。
<iframe src="https://www.example.com" title="示例网站" width="600" height="400"></iframe>
或者使用 CSS：
<style>
iframe {
width: 600px;
height: 400px;
border: none; /* 移除边框 */
}
</style>
<iframe src="https://www.example.com" title="示例网站"></iframe>
属性说明：
属性 | 描述 |
frameborder | 此属性已不推荐使用（在 HTML5 中已废弃）。 使用 CSS 的 |
allowfullscreen | 设置是否允许全屏显示。
|
sandbox | 提供了额外的安全措施， 可以限制在 |
4、安全考虑
使用iframe时，尤其是加载第三方内容时，安全是一个重要考虑。sandbox 属性可以用来为嵌入的内容提供一个额外的安全层，通过禁用脚本、表单提交等功能来减少安全风险。仅允许表单提交和脚本，但禁止顶层导航改变。
<iframe src="example.html" sandbox="allow-forms allow-scripts" title="示例">
</iframe>
5、性能考虑
使用 HTML <iframe> 框架时，考虑到性能是关键。每个 <iframe> 本质上是一个独立的页面，这意味着浏览器需要为其加载额外的资源，如 HTML、CSS、JavaScript，从而增加网络负担和延长页面渲染时间。此外，每个<iframe> 运行在自己的上下文中，增加了内存和 CPU 的使用，尤其是当页面中嵌入了多个 <iframe> 时。安全性也是一个考虑因素，因为 <iframe> 可能增加安全风险，例如点击劫持，而且跨域 <iframe> 可能会受到同源策略的限制。此外，使用 <iframe> 还可能影响到页面的用户交互性能和搜索引擎优化（SEO）。
为了优化 <iframe> 的使用，建议尽量减少其数量，考虑懒加载技术，确保 <iframe> 内容轻量，并探索替代技术，如 AJAX 或 Fetch API，以动态地加载内容。这样做不仅可以提升页面加载速度，还能提高用户体验和网站的SEO表现。正确地使用 <iframe> 需要在其便利性和性能开销之间做出权衡，尤其是在嵌入第三方内容时，寻找替代解决方案可能更为理想。
6、使用场景和示例
HTML 的 <iframe> 标签可以在当前页面内嵌入另一个网页，这个特性广泛应用于嵌入视频（如 YouTube）、地图（如 Google Maps）、社交媒体内容等。尽管 <iframe> 可用于网页布局和第三方内容集成，现代网页开发更倾向于使用 CSS 和 JavaScript。使用 <iframe> 时，要注意其可能对页面加载速度的影响，因为每个 <iframe> 都需加载独立的资源。此外，安全性也是考量因素之一，特别是要防止嵌入不可信的内容以避免安全风险，如点击劫持。跨域限制也可能影响 <iframe> 中内容的交互能力。