内联框架 <iframe>

在网页开发中，<iframe>（Inline Frame，内联框架）标签用于在当前页面内嵌入另一个独立的 HTML 文档。这使得开发者能够无缝集成第三方内容或其他页面资源，且被嵌入的页面依然能够保持其原有的功能性与样式设置。 <iframe> 标签广泛应用于演示示例、嵌入外部服务及实现内容隔离等场景，其实我们课程中的部分内容示例也依赖了 <iframe> 的实现。

<iframe> 的基本用法

在页面中插入 <iframe> 十分简便，只需添加 <iframe> 标签，并指定必要的 src 属性。src 属性用于指明需嵌入页面的 URL，浏览器会自动加载该地址的内容。如需在网站中集成地图服务，只需将地图页面的链接赋值给 src，即可直接在页面内嵌显示目标内容。

|
 
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.12,51.5,0.12,51.51"></iframe>

上面这行代码会在你的页面里，嵌入一个来自OpenStreetMap的伦敦市中心地图。

控制尺寸和边框

默认情况下，<iframe>的尺寸可能不符合你的预期。我们可以使用width和height属性来精确地控制它的大小。

|
<iframe
  src="https://www.example.com"
  width="600"
  height="400">
</iframe>

<iframe> 的现实应用场景

<iframe> 最强大的地方在于可以轻松地嵌入来自第三方服务的复杂内容。

嵌入在线视频

各大视频网站（如YouTube, Vimeo, Bilibili）都提供了基于<iframe>的分享功能。当你点击一个视频下方的“分享”或“嵌入”按钮时，它们通常会为你生成一段<iframe>代码，你只需要将这段代码复制粘贴到你的HTML中即可。

|
<!-- 从YouTube分享视频生成的代码示例 -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

这里出现了一些新属性：

• title: 为<iframe>提供一个描述，对可访问性（特别是屏幕阅读器）非常重要。
• allowfullscreen: 一个布尔属性，允许用户将<iframe>中的内容（这里是视频）切换到全屏模式。
• allow: 指定了在<iframe>中可以启用哪些浏览器特性，是出于安全考虑。

嵌入在线地图

和视频网站类似，谷歌地图、百度地图等地图服务也提供<iframe>代码，让你能方便地在“联系我们”页面中嵌入公司地址的动态地图。

|
<!-- 从谷歌地图分享位置生成的代码示例 -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.32!2d-0.1277!3d51.5073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ce394784c1%3A0x973362024248744b!2sBig%20Ben!5e0!3m2!1sen!2suk!4v1666886991234"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

<iframe> 的安全考量

<iframe>非常强大，但同时也带来了一些安全风险。因为你嵌入的是一个完整的外部网页，如果这个网页是恶意的，它可能会试图做一些不好的事情。 为了限制<iframe>中内容的权限，HTML5引入了sandbox属性。通过给sandbox属性赋予不同的值，你可以精确地控制嵌入的页面能做什么，不能做什么（比如禁止它运行脚本、禁止它提交表单、禁止它弹出窗口等）。

|
<!-- 一个非常严格的沙箱，几乎禁用了所有功能 -->
<iframe src="untrusted-page.html" sandbox></iframe>

对于初学者来说，你暂时不需要深入研究sandbox的每一个配置。但你需要建立一个安全意识：只从你信任的、可靠的来源嵌入内容。

<iframe>是你工具箱里的一件利器，它极大地丰富了你的网页可以承载的内容类型。