iframe是什么？有哪些优缺点？

<iframe> 标签用于在当前网页中嵌入另一个 HTML 页面。它可以在页面上创建一个内嵌的浏览器窗口来展示外部内容。使用 <iframe> 有一些明显的优点和缺点：

优点

1. 隔离内容：

   • 安全性：通过 <iframe> 可以将外部内容与主页面隔离，从而减少潜在的安全风险（如跨站脚本攻击）。
   • 样式和脚本隔离：外部页面的样式和脚本不会直接影响主页面。

2. 嵌入外部资源：

   • 内容集成：可以轻松地将外部网页或应用（如地图、视频、广告）嵌入到当前页面中，而无需重新开发相同的功能。
   • 第三方服务：集成第三方服务（如支付网关、社交媒体分享按钮）而不需要直接控制其代码。

3. 独立滚动：

   • 滚动控制：内嵌的内容可以独立于主页面滚动，有助于创建自定义滚动区域。

4. 简化布局：

   • 多样布局：可以用来实现复杂的布局，例如将广告、视频、或外部应用嵌入到页面的特定部分。

5. 简化测试：

   • 单元测试：在开发和测试中，可以单独测试嵌入的内容，确保它在不同环境中的一致性和功能。

缺点

1. 性能问题：

   • 页面加载：<iframe> 的内容需要额外的 HTTP 请求，可能会影响页面加载速度和性能。
   • 资源消耗：加载多个 <iframe> 可能会增加浏览器的内存和 CPU 使用量。

2. 跨域问题：

   • 限制：与 <iframe> 中的内容进行跨域交互（如操作父页面）可能会受到浏览器的同源策略限制，导致复杂的跨域通信问题。

3. SEO 和可访问性：

   • SEO：搜索引擎通常不会索引 <iframe> 中的内容，可能会影响搜索引擎优化（SEO）。
   • 可访问性：一些用户可能无法通过屏幕阅读器等工具访问 <iframe> 中的内容，影响可访问性。

4. 用户体验：

   • 滚动条和边框：<iframe> 默认会显示滚动条和边框，这可能影响页面的视觉美观。需要额外的 CSS 样式调整来隐藏这些元素。
   • 响应式设计：在响应式设计中处理 <iframe> 的尺寸和布局可能比较麻烦。

5. 安全隐患：

   • 点击劫持：恶意网站可能使用 <iframe> 嵌套其内容来进行点击劫持攻击，利用用户的点击意图执行恶意操作。

示例

<iframe
  src="https://example.com"
  width="600"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>