从 object 到 iframe——其他嵌入技术

很久以前，很流行在网络上使用框架创建网站——网站的一小部分存储于单独的 HTML 页面中。这些被嵌入在一个称为框架集的主文档中，它允许你指定每个框架能够填充在屏幕上的区域，非常像调整表格的列和行的大小。这些做法在 90 年代中期至 90 年代后期被认为是比较酷的，有证据表明，将网页分解成较小的块，这样有利于下载速度——尤其是在那时网络连接速度太慢的情况下更为明显。然而，这些技术有很多问题，随着网络速度越来越快，这些技术带来的问题远超过它们带来的积极因素，所以你再也看不到它们被使用了。

一小段时间之后（20 世纪 90 年代末，21 世纪初），插件技术变得非常受欢迎，例如 Java Applet 和 Flash——这些技术允许网络开发者将丰富的内容嵌入到网页中，例如视频和动画等，这些内容不能通过 HTML 单独实现。嵌入这些技术是通过诸如 <object> 和较少使用的 <embed> 元素来实现的，当时它们非常有用。由于许多问题，包括无障碍、安全性、文件大小等，它们已经过时了; 如今，大多数移动设备不再支持这些插件，桌面端也逐渐不再支持。

最后，<iframe> 元素出现了（连同其他嵌入内容的方式，如 <canvas>、<video> 等），它提供了一种将整个 web 页嵌入到另一个网页的方法，看起来就像那个 web 页是另一个网页的一个 <img> 或其他元素一样。<iframe> 现在经常被使用。

了解完历史之后，让我们继续往下看以了解如何使用它们。

在这篇文章中，我们将直接进入自主学习部分，让你立即体会到嵌入技术的实用性。大家都非常熟悉 Bilibili，但很多人不了解它所提供的一些分享功能。让我们来看看 Bilibili 如何让我们通过 <iframe> 在页面中嵌入喜欢的视频。

1. 首先，去 Bilibili 找一个喜欢的视频。

2. 在视频下方，你会看到一个分享按钮（样式为一个向右箭头），鼠标停留在那个按钮上，可以看到一些分享选项。

3. 选择“嵌入代码”选项，会出现“成功复制到剪贴板”的提示。

4. 将复制的代码粘贴到下面的输入框里，看看输出结果是什么。

此外，你还可以试试在示例中嵌入 Bing 地图：

1. 去 Bing 地图找一个喜欢的地图。

2. 鼠标移动到 UI 上方的“更多”处。

3. 选择嵌入地图选项。

4. 在新打开的网页中，指定你喜欢的地图大小、类型、风格和链接，点击“生成代码”按钮，代码会复制到剪贴板中。

5. 将复制的代码粘贴到下面的输入框，看看输出结果是什么。

如果你犯了某些错误，你可以点击重置按钮以重置编辑器。如果你确实被卡住了，按下显示答案按钮以借鉴答案。