从对象到 iframe - 其他嵌入技术

¥A short history of embedding

很久以前，在网络上，使用框架来创建网站很流行 - 网站的一小部分存储在单独的 HTML 页面中。这些嵌入在称为框架集的主文档中，它允许你指定每个框架填充的屏幕区域，就像调整表格的列和行的大小一样。这些在 90 年代中后期被认为是最酷的，有证据表明，将网页分成这样的小块更有利于下载速度 - 尤其是在当时的网络连接速度如此缓慢的情况下。然而，它们确实存在许多问题，随着网络速度变得更快，这些问题远远超过了任何积极因素，因此你不会再看到它们被使用。

¥A long time ago on the Web, it was popular to use frames to create websites — small parts of a website stored in individual HTML pages. These were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. These were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. They did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore.

不久之后（90 年代末、2000 年代初），插件技术变得非常流行，例如 Java 小程序 和 闪光 - 这些技术允许 Web 开发者将丰富的内容嵌入到视频和动画等网页中，而这些内容仅通过 HTML 是无法获得的。这些技术的嵌入是通过像 <object> 和较少使用的 <embed> 这样的元素来实现的，它们在当时非常有用。由于许多问题，包括可访问性、安全性、文件大小等，它们已经过时了。如今主流浏览器已经停止支持 Flash 等插件。

¥A little while later (late 90s, early 2000s), plugin technologies became very popular, such as Java Applets and Flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through HTML alone. Embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time. They have since fallen out of fashion due to many problems, including accessibility, security, file size, and more. These days major browsers have stopped supporting plugins such as Flash.

最后，出现了 <iframe> 元素（以及其他嵌入内容的方式，例如 <canvas>、<video> 等）。这提供了一种将整个 Web 文档嵌入到另一个文档中的方法，就好像它是 <img> 或其他此类元素一样，并且 今天经常使用。

¥Finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) This provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today.

历史课结束后，让我们继续看看如何使用其中的一些内容。

¥With the history lesson out of the way, let's move on and see how to use some of these.

¥Active learning: classic embedding uses

在本文中，我们将直接跳到主动学习部分，立即让你真正了解嵌入技术的用途。网络世界对 YouTube 非常熟悉，但很多人不知道它提供的一些共享设施。让我们看看 YouTube 如何允许我们使用 <iframe> 将视频嵌入到我们喜欢的任何页面中。

¥In this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with YouTube, but many people don't know about some of the sharing facilities it has available. Let's look at how YouTube allows us to embed a video in any page we like using an <iframe>.

1. 首先，访问 YouTube 并找到你喜欢的视频。
2. 在视频下方，你会发现一个“共享”按钮 - 选择此按钮可显示共享选项。
3. 选择“嵌入”按钮，你将获得一些 <iframe> 代码 - 复制此代码。
4. 将其插入下面的输入框中，然后查看输出中的结果。

为了获得奖励积分，你还可以尝试在示例中嵌入 谷歌地图：

¥For bonus points, you could also try embedding a Google Map in the example:

1. 转到 Google 地图并找到你喜欢的地图。
2. 单击 UI 左上角的 "汉堡菜单"（三条水平线）。
3. 选择共享或嵌入地图选项。
4. 选择嵌入地图选项，这将为你提供一些 <iframe> 代码 - 复制此代码。
5. 将其插入下面的输入框中，然后查看输出中的结果。

如果你犯了错误，你可以随时使用“重置”按钮进行重置。如果你确实遇到困难，请按“显示解决方案”按钮查看答案。

¥If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer.

<h2>Live output</h2>

<div class="output" style="min-height: 250px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea
  id="code"
  class="input"
  style="width: 95%;min-height: 100px;"></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

const htmlSolution =
  '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
let solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

¥iframes in detail

那么，这既简单又有趣，对吧？<iframe> 元素旨在允许你将其他 Web 文档嵌入到当前文档中。这非常适合将第三方内容合并到你的网站中，你可能无法直接控制这些内容，也不想实现自己的版本，例如来自在线视频提供商的视频、讨论 等评论系统、在线地图 地图提供商、广告横幅等。甚至你在本课程中使用的实时可编辑示例也是使用 <iframe> 实现的。

¥So, that was easy and fun, right? <iframe> elements are designed to allow you to embed other web documents into the current document. This is great for incorporating third-party content into your website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers, commenting systems like Disqus, maps from online map providers, advertising banners, etc. Even the live editable examples you've been using through this course are implemented using <iframe>s.

在深入使用 <iframe> 元素之前，需要注意一些安全问题。假设你想使用 <iframe> 元素在你的某个网页上包含 MDN 术语表，你可以尝试类似下一个代码示例的操作。如果你要将以下代码添加到其中一个页面中，你可能会惊讶地看到一条错误消息而不是术语表页面：

¥Before diving into using <iframe> elements, there are some security concerns to be aware of. Say you wanted to include the MDN glossary on one of your web pages using the <iframe> element, you might try something like the next code example. If you were to add the code below into one of your pages, you might be surprised to see an error message instead of the glossary page:

<head>
  <style>
    iframe {
      border: none;
    }
  </style>
</head>
<body>
  <iframe
    src="https://web.nodejs.cn/en-US/docs/Glossary"
    width="100%"
    height="500"
    allowfullscreen
    sandbox>
    <p>
      <a href="/en-US/docs/Glossary">
        Fallback link for browsers that don't support iframes
      </a>
    </p>
  </iframe>
</body>

如果你查看浏览器的控制台，你会看到如下错误消息：

¥If you have a look at your browser's console, you'll see an error message like the following:

Refused to display 'https://web.nodejs.cn/' in a frame because it set 'X-Frame-Options' to 'deny'.

下面的 安全 部分更详细地介绍了为什么会看到此错误，但首先，让我们看看我们的代码在做什么。

¥The Security section below goes into more detail about why you see this error, but first, let's have a look at what our code is doing.

该示例包括使用 <iframe> 所需的基本要素：

¥The example includes the bare essentials needed to use an <iframe>:

border: none

如果使用，则 <iframe> 显示时没有周围边框。否则，默认情况下，浏览器会显示带有边框的 <iframe>（这通常是不可取的）。

allowfullscreen

如果设置，则可以使用 全屏 API 将 <iframe> 置于全屏模式（有点超出了本文的范围。）

src

该属性与 <video>/<img> 一样，包含指向要嵌入文档的 URL 的路径。

width 和 height

这些属性指定你希望 iframe 的宽度和高度。

sandbox

该属性适用于比其他 <iframe> 功能（例如 IE 10 及更高版本）稍微更现代的浏览器，需要增强的安全设置；我们将在下一节中详细讨论这一点。

注意：为了提高速度，最好在主要内容加载完成后使用 JavaScript 设置 iframe 的 src 属性。这使你的页面更快可用并减少官方页面加载时间（一个重要的 SEO 指标。）

¥Note: In order to improve speed, it's a good idea to set the iframe's src attribute with JavaScript after the main content is done with loading. This makes your page usable sooner and decreases your official page load time (an important SEO metric.)

¥Security concerns

上面我们提到了安全问题 - 现在让我们更详细地讨论一下。我们并不期望你第一次就能完全理解所有这些内容；我们只是想让你意识到这个问题，并在你获得更多经验并开始考虑在实验和工作中使用 <iframe> 时提供参考。另外，没有必要害怕而不使用 <iframe> - 你只需要小心即可。继续阅读……

¥Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <iframe>s in your experiments and work. Also, there is no need to be scared and not use <iframe>s — you just need to be careful. Read on…

浏览器制造商和 Web 开发者经过惨痛的教训才知道，iframe 是 Web 上的坏人（通常称为黑客，或更准确地说，破解者）的常见目标（官方术语：攻击向量），如果他们试图恶意修改你的 网页，或诱骗人们做他们不想做的事情，例如泄露用户名和密码等敏感信息。因此，规范工程师和浏览器开发者开发了各种安全机制来使 <iframe> 更加安全，并且还需要考虑最佳实践 - 我们将在下面介绍其中的一些。

¥Browser makers and Web developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the Web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. Because of this, spec engineers and browser developers have developed various security mechanisms for making <iframe>s more secure, and there are also best practices to consider — we'll cover some of these below.

注意：点击劫持 是一种常见的 iframe 攻击，黑客将不可见的 iframe 嵌入到你的文档中（或将你的文档嵌入到他们自己的恶意网站中）并使用它来捕获用户的交互。这是误导用户或窃取敏感数据的常见方式。

¥Note: Clickjacking is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users' interactions. This is a common way to mislead users or steal sensitive data.

首先是一个简单的例子 - 尝试将我们上面显示的前面的示例加载到你的浏览器中 - 你可以 在 GitHub 上找到它（也可以是 查看源代码）。你可能会看到某种类似于 "我无法打开此页面" 的消息，而不是你期望的页面，如果 你查看 浏览器开发者工具 中的控制台，你会看到一条消息告诉你原因。在 Firefox 中，你会收到诸如“设置为 "DENY" 的 "X 框架选项" 指令拒绝在框架中加载“https://web.nodejs.cn/en-US/docs/Glossary””之类的信息。这是因为构建 MDN 的开发者在为网站页面提供服务的服务器上添加了一项设置，以禁止它们嵌入到 <iframe> 中（请参阅下面的 配置 CSP 指令）。这是有道理的 — 整个 MDN 页面对于 嵌入到其他页面中，除非你想要将它们嵌入到你的网站上并声称它们是你自己的，或者尝试通过 clickjacking 窃取数据，这都是非常糟糕的事情。另外，如果每个人都开始这样做，所有额外的带宽将开始花费 Mozilla 大量资金。

¥A quick example first though — try loading the previous example we showed above into your browser — you can find it live on GitHub (see the source code too.) Instead of the page you expected, you'll probably see some kind of message to the effect of "I can't open this page", and if you look at the Console in the browser developer tools, you'll see a message telling you why. In Firefox, you'll get told something like The loading of "https://web.nodejs.cn/en-US/docs/Glossary" in a frame is denied by "X-Frame-Options" directive set to "DENY". This is because the developers that built MDN have included a setting on the server that serves the website pages to disallow them from being embedded inside <iframe>s (see Configure CSP directives, below.) This makes sense — an entire MDN page doesn't really make sense to be embedded in other pages unless you want to do something like embed them on your site and claim them as your own — or attempt to steal data via clickjacking, which are both really bad things to do. Plus if everybody started to do this, all the additional bandwidth would start to cost Mozilla a lot of money.

仅在必要时嵌入

¥Only embed when necessary

有时嵌入第三方内容（例如 YouTube 视频和地图）是有意义的，但如果仅在完全必要时嵌入第三方内容，则可以为自己省去很多麻烦。网络安全的一条好规则是“永远不要太谨慎。如果你成功了，无论如何都要仔细检查一下。如果其他人做到了，就假设它是危险的，直到证明并非如此。”

¥Sometimes it makes sense to embed third-party content — like youtube videos and maps — but you can save yourself a lot of headaches if you only embed third-party content when completely necessary. A good rule for web security is "You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise."

除了安全之外，你还应该注意知识产权问题。大多数内容都是受版权保护的，无论是离线的还是在线的，甚至是你可能意想不到的内容（例如，维基共享资源 上的大多数图片）。切勿在你的网页上显示内容，除非你拥有该内容或所有者已向你提供明确的书面许可。对侵犯版权的处罚是严厉的。再说一次，你永远不能太谨慎。

¥Besides security, you should also be aware of intellectual property issues. Most content is copyrighted, offline and online, even content you might not expect (for example, most images on Wikimedia Commons). Never display content on your webpage unless you own it or the owners have given you written, unequivocal permission. Penalties for copyright infringement are severe. Again, you can never be too cautious.

如果内容已获得许可，你必须遵守许可条款。例如 MDN 上的内容是 根据 CC-BY-SA 许可。这意味着，即使你进行了实质性更改，当你引用我们的内容时也必须 正确地相信我们。

¥If the content is licensed, you must obey the license terms. For example, the content on MDN is licensed under CC-BY-SA. That means, you must credit us properly when you quote our content, even if you make substantial changes.

使用 HTTPS

¥Use HTTPS

HTTPS 是 HTTP 的加密版本。你应该尽可能使用 HTTPS 为你的网站提供服务：

¥HTTPS is the encrypted version of HTTP. You should serve your websites using HTTPS whenever possible:

1. HTTPS 降低了远程内容在传输过程中被篡改的可能性。
2. HTTPS 可防止嵌入内容访问父文档中的内容，反之亦然。

启用 HTTPS 的站点需要安装特殊的安全证书。许多托管提供商提供支持 HTTPS 的托管，你无需自行进行任何设置即可放置证书。但是，如果你确实需要自己为你的网站设置 HTTPS 支持，让我们加密 提供了可用于自动创建和安装必要证书的工具和说明 - 内置对最广泛使用的 Web 服务器的支持，包括 Apache Web 服务器、Nginx 等。Let's Encrypt 工具旨在使该过程尽可能简单，因此没有充分的理由避免使用它或其他可用的方法来为你的网站启用 HTTPS。

¥HTTPS-enabling your site requires a special security certificate to be installed. Many hosting providers offer HTTPS-enabled hosting without you needing to do any setup on your own to put a certificate in place. But if you do need to set up HTTPS support for your site on your own, Let's Encrypt provides tools and instructions you can use for automatically creating and installing the necessary certificate — with built-in support for the most widely-used web servers, including the Apache web server, Nginx, and others. The Let's Encrypt tooling is designed to make the process as easy as possible, so there's really no good reason to avoid using it or other available means to HTTPS-enable your site.

注意：GitHub 页面 默认允许通过 HTTPS 提供内容。如果你使用不同的托管提供商，你应该检查他们为使用 HTTPS 提供内容提供哪些支持。

¥Note: GitHub pages allow content to be served via HTTPS by default. If you are using a different hosting provider you should check what support they provide for serving content with HTTPS.

始终使用 sandbox 属性

¥Always use the sandbox attribute

你希望给予攻击者尽可能少的权力来在你的网站上做坏事，因此你应该只向嵌入内容授予完成其工作所需的权限。当然，这也适用于你自己的内容。可以适当使用代码（或用于测试）但不会对代码库的其余部分造成任何损害（无论是意外还是恶意）的代码容器称为 sandbox。

¥You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content only the permissions needed for doing its job. Of course, this applies to your own content, too. A container for code where it can be used appropriately — or for testing — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox.

未沙箱化的内容可能能够执行 JavaScript、提交表单、触发弹出窗口等。默认情况下，你应该使用不带参数的 sandbox 属性来施加所有可用的限制，如我们前面的示例所示。

¥Content that's not sandboxed may be able to execute JavaScript, submit forms, trigger popup windows, etc. By default, you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example.

如果绝对需要，你可以一一添加权限（在 sandbox="" 属性值内） - 请参阅 sandbox 参考条目以了解所有可用选项。一个重要的注意事项是，你永远不应该将 allow-scripts 和 allow-same-origin 添加到 sandbox 属性中 - 在这种情况下，嵌入内容可以绕过阻止网站执行脚本的 同源策略，并使用 JavaScript 完全关闭沙箱。

¥If absolutely required, you can add permissions back one by one (inside the sandbox="" attribute value) — see the sandbox reference entry for all the available options. One important note is that you should never add both allow-scripts and allow-same-origin to your sandbox attribute — in that case, the embedded content could bypass the Same-origin policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.

注意：如果攻击者可以欺骗人们直接访问恶意内容（在 iframe 之外），那么沙盒就无法提供保护。如果某些内容可能是恶意的（例如用户生成的内容），请将其从不同的 domain 提供到你的主站点。

¥Note: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an iframe). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different domain to your main site.

配置 CSP 指令

¥Configure CSP directives

CSP 代表 内容安全政策，并提供 一组 HTTP 标头（从 Web 服务器提供网页时随网页一起发送的元数据），旨在提高 HTML 文档的安全性。当涉及到保护 <iframe> 时，你可以 配置你的服务器以发送适当的 X-Frame-Options 标头。 这可以防止其他网站将你的内容嵌入到其网页中（这将导致 clickjacking 和许多其他攻击），这正是 MDN 开发者所做的，正如我们之前看到的 在。

¥CSP stands for content security policy and provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <iframe>s, you can configure your server to send an appropriate X-Frame-Options header. This can prevent other websites from embedding your content in their web pages (which would enable clickjacking and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.

注意：你可以阅读 Frederik Braun 的帖子 关于 X-Frame-Options 安全标头，了解有关此主题的更多背景信息。显然，这超出了本文完整解释的范围。

¥Note: You can read Frederik Braun's post On the X-Frame-Options Security Header for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.

¥The <embed> and <object> elements

<embed> 和 <object> 元素与 <iframe> 具有不同的功能 - 这些元素是用于嵌入外部内容（例如 PDF）的通用嵌入工具。

¥The <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding external content, such as PDFs.

但是，你不太可能经常使用这些元素。如果你需要显示 PDF，通常最好链接到它们，而不是将它们嵌入到页面中。

¥However, you are unlikely to use these elements very much. If you need to display PDFs, it's usually better to link to them, rather than embedding them in the page.

从历史上看，这些元素也曾用于嵌入由浏览器 plugins（例如 Adobe Flash）处理的内容，但该技术现已过时，并且不受现代浏览器支持。

¥Historically these elements have also been used for embedding content handled by browser plugins such as Adobe Flash, but this technology is now obsolete and is not supported by modern browsers.

如果你发现自己需要嵌入插件内容，那么你至少需要以下信息：

¥If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

让我们看一下将 PDF 嵌入页面的 <object> 示例（请参阅 活生生的例子 和 源代码）：

¥Let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
  <p>
    You don't have a PDF plugin, but you can
    <a href="mypdf.pdf">download the PDF file. </a>
  </p>
</object>

PDF 是纸质和数字之间的必要垫脚石，但它们带来了许多 无障碍挑战，并且在小屏幕上难以阅读。它们在某些圈子中仍然很受欢迎，但最好链接到它们，以便可以在单独的页面上下载或阅读它们，而不是将它们嵌入网页中。

¥PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

¥Test your skills!

你已读完本文，但你还记得最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否已保留此信息 - 请参阅 测试你的技能：多媒体和嵌入。

¥You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding.

¥Summary

在 Web 文档中嵌入其他内容的主题很快就会变得非常复杂，因此在本文中，我们尝试以一种简单、熟悉的方式来介绍它，这种方式会立即显得相关，同时仍然暗示一些更高级的功能 所涉及的技术。首先，除了在页面上包含地图和视频等第三方内容之外，你不太可能将嵌入用于其他用途。然而，随着你变得更有经验，你可能会开始发现它们的更多用途。

¥The topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.

除了我们在这里讨论的技术之外，还有许多其他技术涉及嵌入外部内容。我们在之前的文章中看到了一些，例如 <video>、<audio> 和 <img>，但还有其他一些有待发现，例如用于 JavaScript 生成的 2D 和 3D 图形的 <canvas>，以及用于嵌入矢量图形的 <svg>。我们将在本模块的下一篇文章中讨论 SVG。

¥There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as <video>, <audio>, and <img>, but there are others to discover, such as <canvas> for JavaScript-generated 2D and 3D graphics, and <svg> for embedding vector graphics. We'll look at SVG in the next article of the module.