嵌入的简史

很久以前，在网络上，很受欢迎的是使用框架来创建网站 - 网站的小部分存储在各个HTML页面中。 这些内嵌在称为框架集的主文档中，这允许您指定屏幕上每个框架填充的区域，而不是像调整表格的列和行一样。 这些被认为是90年代中后期的冷静程度，有证据表明，将网页拆分成更小的块，这样更适合下载速度 - 尤其是当网络连接速度很慢时。 然而，他们有很多问题，远远超过任何阳性，因为网络速度更快，所以你不会看到他们被使用了。

Java Applets\">稍后(90年代后期，21世纪初)，插件技术变得非常受欢迎，例如 Java Applets and Flash — these allowed web developers to embed rich content into webpages such as video and animations\">a>和 Flash - 这些允许网络开发者将丰富的内容嵌入到网页(如视频和动画)中，这只是不能通过单独的HTML。嵌入这些技术是通过<object>, and the lesser-used 外部资源，其可以被视为图像，嵌套浏览上下文或要由插件处理的资源。"> < object> ， a href ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed"title ="HTML嵌入元素表示外部应用程序或交互式内容的集成点(换句话说， <embed>, and they were very useful at the time.\">，插件)。"> < embed> ，它们在当时非常有用。由于许多问题，包括可访问性，安全性，文件大小等等，它们已经脱离了时尚;这些天大多数移动设备不再支持这样的插件，桌面支持正在出路。

Java Applets\">稍后(90年代后期，21世纪初)，插件技术变得非常受欢迎，例如 Java Applets and Flash — these allowed web developers to embed rich content into webpages such as video and animations\">a>和 Flash - 这些允许网络开发者将丰富的内容嵌入到网页(如视频和动画)中，这只是不能通过单独的HTML。嵌入这些技术是通过<object>, and the lesser-used 外部资源，其可以被视为图像，嵌套浏览上下文或要由插件处理的资源。"> < object> ， a href ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed"title ="HTML嵌入元素表示外部应用程序或交互式内容的集成点(换句话说， <embed>, and they were very useful at the time.\">，插件)。"> < embed> ，它们在当时非常有用。由于许多问题，包括可访问性，安全性，文件大小等等，它们已经脱离了时尚;这些天大多数移动设备不再支持这样的插件，桌面支持正在出路。

有了历史课程，让我们继续，看看如何使用其中的一些。

主动学习:经典嵌入使用

在本文中，我们将直接跳转到一个积极的学习部分，立即给你一个真正的想法，嵌入技术是有用的。Youtube, but many people don\'t know about some of the sharing facilities it has available\">在线世界非常熟悉 Youtube ，但很多人不知道一些共享设施。让我们看看YouTube如何允许我们使用HTML内联框架元素(iframe)表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可以包含头部和正文或头部和框架集，但不能同时包含正文和然而，可以在正常文档主体内使用iframe，每个浏览上下文具有其自己的会话历史和活动文档，包含嵌入内容的浏览上下文称为父浏览上下文，顶层浏览上下文<iframe>.\">没有父级)通常是浏览器窗口。"> < iframe> 。

1. First, go to Youtube and find a video you like.
2. Below the video you'll find a Share button — select this to display the sharing options.
3. Select the Embed option and you'll be given some <iframe> code — copy this.
4. Insert it into the Input box below, and see what the result is in the Output.

对于奖励积分，您还可以尝试在示例中嵌入 Google地图:

1. Go to Google Maps and find a map you like.
2. Click on the "Hamburger Menu" (three horizontal lines) in the top left of the UI.
3. Select the Share or embed map option.
4. Select the Embed map option, which will give you some <iframe> code — copy this.
5. Insert it into the Input box below, and see what the result is in the Output.

如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看答案。

<h2>Input</h2>
<textarea id="code" class="input">
</textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

.output {
  height: 14em;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

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

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>';
  drawOutput();
});

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

iframes详细

所以，这是容易和乐趣吗？ 页面到当前页面在HTML 4.01中，文档可能包含一个头部和一个主体或一个头部和一个框架集，但不能同时包含一个主体和一个框架集，但是一个iframe可以在一个正常的文档主体中使用，<\">上下文具有其自己的会话历史和活动文档，包含嵌入内容的浏览上下文被称为父浏览上下文。顶层浏览上下文(其没有父)通常是浏览器窗口"> elements are designed to allow you to embed other web documents into the current document.\">iframe> 元素旨在允许您将其他Web文档嵌入到当前文档中。这非常适合将第三方内容整合到您的网站中，而您可能无法直接控制，也不想实施自己的版本(例如来自在线视频提供商的视频)，注释系统(例如Disqus, maps from online map providers, advertising banners, etc. The live editable examples you\'ve been using through this course are implemented using &lt\">://disqus.com/"class ="external"> Disqus ，来自在线地图提供商的地图，广告横幅等。您通过本课程使用的现场可编辑示例是使用&lt s.\">; iframe> 。

有一些严重的安全问题需要考虑使用< iframe> ，我们将在下面讨论，但这并不意味着 不应该在你的网站中使用它 - 它只需要一些知识和仔细的思考。 让我们更详细地探讨代码。 假设您想在其中一个网页上加入MDN词汇表，您可以尝试这样做:

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

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

allowfullscreen

If set, the <iframe> is able to be placed in fullscreen mode using the Full Screen API (somewhat beyond scope for this article.)

frameborder

If set to 1, this tells the browser to draw a border between this frame and other frames, which is the default behaviour. 0 removes the border. Using this isn't really recommended any more, as the same effect can be better achieved using border: none; in your CSS.

src

This attribute, as with <video>/<img>, contains a path pointing to the URL of the document to be embedded.

width and height

These attributes specify the width and height you want the iframe to be.

Fallback content

In the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the browser doesn't support the <iframe>. In this case we have included a link to the page instead. It is unlikely that you'll come across any browser that doesn't support <iframe>s these days.

sandbox

This attribute, which works in slightly more modern browsers than the rest of the <iframe> features (e.g. IE 10 and above) requests heightened security settings; we'll say more about this in the next section.

安全问题

上面我们提到安全问题 - 让我们现在更详细地介绍一下。 我们不期望你第一次完全理解所有这些内容; 我们只是想让你知道这个问题，并提供一个参考，当你得到更多的经验，并开始考虑使用< iframe> 在你的实验和工作回来。 此外，没有必要害怕，不使用< iframe> - 你只需要小心。 阅读...

浏览器制造商和Web开发人员已经了解到iframe是网络上的坏人(通常称为黑客或更多)的常见目标(官方术语:攻击向量 准确地，饼干)攻击，如果他们试图恶意修改您的网页，或诱骗人们做他们不想做的事情，如揭露敏感信息，如用户名和密码。 因此，规格工程师和浏览器开发人员已经开发了各种安全机制，使< iframe> 更安全，还有一些最佳做法需要考虑 - 我们将在下面介绍其中的一些。

Clickjacking 是一种常见的iframe攻击，黑客会将不可见的iframe嵌入您的 文档(或将您的文档嵌入到自己的恶意网站)，并使用它捕获用户的交互。 这是误导用户或窃取敏感数据的常见方式。

Only embed when necessary

有时，嵌入第三方内容(例如YouTube视频和地图)是有意义的，但如果您只在完全必要的情况下嵌入第三方内容，则可以节省自己很多头痛。 对于网络安全来说，一个好的经验法则是:"你永远不能太谨慎，如果你这样做了，再仔细检查一下，如果别人做，假设它是危险的，除非另有证明。"

Use HTTPS

通常使用SSL或TLS加密客户端和服务器之间的所有通信，这种安全连接允许客户端安全地与服务器交换敏感数据，例如用于银行活动或在线购物。"> HTTPS 是加密版本 of HTTP是文本的(所有通信都是以纯文本形式进行的)和无状态的(没有通信知道以前的通信)。 您应该尽可能使用HTTPS为您的网站提供服务:

1. HTTPS reduces the chance that remote content has been tampered with in transit,
2. HTTPS prevents embedded content from accessing content in your parent document, and vice versa.

使用HTTPS需要安全证书，这可能很昂贵(虽然让我们加密使事情更容易) - 如果你不能得到 一个，您可以使用HTTP提供您的父文档。 然而，由于上述HTTPS的第二个好处，无论成本多少，您绝不能使用HTTP嵌入第三方内容。 (在最佳情况下，您的用户的Web浏览器会给他们一个可怕的警告。)所有信誉良好的公司，通过< iframe> HTTPS - 例如，当您嵌入Google地图或Youtube中的内容时，请查看< iframe> src 属性中的网址。

Always use the sandbox attribute

你希望攻击者在你的网站上给予攻击者的力量不大，因此你应该给嵌入的内容只有执行其工作所需的权限。 当然，这也适用于您自己的内容。 一个代码容器，它可以被正确地使用或者用于测试，但不会对代码库的其他部分(意外或恶意)造成任何损害，被称为 org / wiki / Sandbox_(computer_security)"class ="external"> sandbox 。

未经过消毒处理的内容可能做的太多(执行JavaScript，提交表单，弹出窗口等)默认情况下，您应该通过使用没有参数的 sandbox 属性强加所有可用的限制，如我们前面的示例 。

如果绝对需要，您可以逐个添加权限(在 sandbox =""属性值内) - 请参阅 zh-CN / docs / Web / HTML / Element / iframe#attr-sandbox"> sandbox 所有可用选项的参考条目。 一个重要的注意事项是，您应该从沙盒中添加 allow-scripts 和 allow-same-origin 属性 - 在这种情况下，嵌入内容可能绕过相同的源安全策略，阻止网站执行脚本，并使用JavaScript完全关闭沙盒。

Configure CSP directives

CSP stands for \">的网站相关攻击，如XSS和数据注入。"> CSP 代表 , and provides a set of HTTP Headers内容安全政策 ，并提供一组HTTP标头 (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document.\">/ a>(当您的网页从网络服务器提供时，与您的网页一起发送的元数据)，旨在提高HTML文档的安全性。<iframe>s, you can 在确保< iframe> 的安全性时，您可以 configure your server to send an appropriate X-Frame-Options  header. This can prevent other websites from embedding your content in their webpages (which would enable\">框架选项">配置您的服务器以发送适当的 X-Frame-Options 标题。 这可以防止其他网站将您的内容嵌入其网页clickjacking and a host of other attacks), which is exactly what the MDN developers\">点击劫持和一系列其他攻击)，这正是MDN开发人员已经做了，正如我们前面看到的。

< embed> 和< object> 元素

注意:您可以阅读Frederik Braun的帖子 header /"class ="external">关于X-Frame-Options安全报头，以获取有关此主题的更多背景信息。 显然，在本文中完全解释的范围之外。

但是，您不太可能非常使用这些元素 - Applet已经使用多年，Flash不再受欢迎，由于多种原因(请参阅针对插件的情况 / a>，下面)，PDF往往比嵌入更好的链接，而其他内容，如图像和视频有更好，更容易的元素来处理这些。 插件和这些嵌入方法真的是一种遗留的技术，我们主要提到它们，以防在某些情况下遇到它们，例如内联网或企业项目。

如果你发现自己需要嵌入插件内容，这是至少需要的那种信息:

以下是使用 或交互式内容(换句话说，插件)。"> < embed> 元素嵌入Flash电影(请参阅此 .github.io / learning-area / html / multimedia-and-embedding / other-embedding-technologies / embed-flash.html"class ="external">在Github上生活，以及 ://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html"class ="external">检查源代码 / a>):

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

很可怕，不是。 由Adobe Flash工具生成的HTML往往更糟，使用嵌入了< embed> 元素的< object> 元素覆盖所有基 (检查一个例子。)Flash甚至成功地用作HTML5视频的后备内容，一段时间，但是这越来越被视为没有必要。

现在让我们看看将PDF嵌入页面的< object> 示例(参见 and-embedding / other-embedding-technologies / object-pdf.html"class ="external"> live example 和 /gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html"class ="external">源代码):

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

PDF是纸质和数字之间必要的垫脚石，但它们构成了许多辅助功能挑战，可能很难 在小屏幕上阅读。 他们仍然倾向于在某些圈子受欢迎，但它是更好地链接到他们，所以他们可以下载或阅读在一个单独的页面，而不是嵌入在网页。

对插件的情况

过去，插件在Web上是不可或缺的。 记住你必须安装Adobe Flash Player才能在线观看电影的日子？ 然后你总是有关于更新Flash Player和你的Java运行时环境烦人的警报。 网络技术从此变得更加强大，那些日子已经结束了。 对于大多数应用程序，现在是停止提供依赖于插件的内容的时候了，并开始利用Web技术。

• Broaden your reach to everyone. Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is largely usable without plugins, people would rather just go to your competitors' websites than install a plugin.
• Give yourself a break from the extra accessibility headaches that come with Flash and other plugins.
• Stay clear of additional security hazards. Adobe Flash is notoriously insecure, even after countless patches. In 2015, Alex Stamos, chief security officer of Facebook, even requested that Adobe discontinue Flash.

那么你该怎么办呢？如果您需要交互性，HTML和JavaScript can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology.\">客户端以动态脚本网页，但通常也在服务器端。"> JavaScript 可以轻松地为您完成工作，无需Java applet或过时的ActiveX / BHO技术。HTML5 video for your media needs, SVG\">您可以使用 HTML5视频来满足您的媒体需求，而不是依赖于Adobe Flash， SVG for vector graphics, and Canvas for complex images and animations.\">a>用于矢量图形，以及 Canvas 用于复杂的图像和动画。 Peter Elst was already writing some years ago that Adobe Flash is rarely the right tool for the\"> Peter Elst已在几年前撰写，Adobe Flash很少是适用于工作，除了专门的游戏和商业应用程序。对于ActiveX，即使是Microsoft的Edge browser no longer supports it.\">图形Web浏览器与Microsoft Windows捆绑在一起，自2014年开始由Microsoft开发。最初称为Spartan，Edge取代了长期以来的Microsoft浏览器Internet Explorer。"> Edge 浏览器不再支持它。

概要

在Web文档中嵌入其他内容的主题很快就会变得非常复杂，因此在本文中，我们试图以一种简单而熟悉的方式介绍它，它将立即显得相关，同时仍然暗示了一些更高级的功能 涉及技术。 首先，您不太可能使用嵌入功能，包括第三方内容(例如您网页上的地图和视频)。 当你变得更有经验的时候，你很可能开始为他们找到更多的用途。

在Web文档中嵌入其他内容的主题很快就会变得非常复杂，因此在本文中，我们试图以一种简单而熟悉的方式介绍它，它将立即显得相关，同时仍然暗示了一些更高级的功能 涉及技术。 首先，您不太可能使用嵌入功能，包括第三方内容(例如您网页上的地图和视频)。 当你变得更有经验的时候，你很可能开始为他们找到更多的用途。