什么是 iframe？它通常用来做什么？

iframe 是 HTML 中用于在网页内嵌入另一个 HTML 页面的标签，常见用途包括嵌入视频、表单和跨域内容。

HTML 简单 DOM 跨域 嵌入

iframe（Inline Frame, 内联框架）是 HTML 的一个标签，定义在文档结构中创建行内框架，用于在当前网页的一个区域内嵌入另一个独立的 HTML 内容。这种框架类似于“窗口中窗口”，本质上是隔离的 DOM 上下文，可以在同一个页面上显示来自不同源或其他资源的内容，而不干扰主页的核心结构或功能。

常见用途包括：

  1. 嵌入独立内容：
    • 经常用于显示第三方元素如 YouTube 视频或第三方表单。语法如 <iframe src="https://youtube.com/videoid" width="500" height="300" allowfullscreen></iframe>
    • 简化跨域集成，支持加载外部网站。 ` ``

    ` `` 这段代码可嵌入外部站点到页面；属性能控制框架的高度（height）、宽度（width）、滚动（scrolling）等外观。

  2. 复用性提高代码效率：
    • iframe 能加载共享区块页面模块内容，如页眉(headers)或页脚(footers)，用于多个页面的统一复用。更新只需修改单个文件，部分加载不重主页结构，加速页面呈现与维护。
  3. 分离上下文提升安全与控制：
    • 通过沙箱(sandbox)功能创建隔离安全上下文，使嵌入内容不能访问父页面的脚本或 DOM，常用于广告系统、表单载入，防止恶意脚本。
    • 实现跨域隔离通信，为需要受限区域应用如登陆窗。

注意事项：虽然功能强大，但潜在风险包括不易管理嵌套页面、页面增多对 SEO 不友好导致搜索引擎抓取难管理。开发者通常在替代手段受限下采用以嵌入高隔离内容。