Include iframes

Important: this documentation is not applicable to your currently selected format stories!

Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

基础知识

您可以使用 amp-iframe 元素在您的网页中显示 iframe。

iframe 在 AMP 中特别有用，可显示主网页中不支持的内容，例如，需要使用用户编写的 JavaScript 代码的内容。

`amp-iframe` 要求：

必须距离顶部至少 600px 或位于第一个视口 75% 下方的位置（使用 placeholder 的 iframe 除外）。
只能通过 HTTPS 请求资源，且不得与容器的来源相同，除非未指定 allow-same-origin。

延伸阅读：要了解详情，请参阅 amp-iframe 的完整规范。

添加脚本

要向您的网页中添加 amp-iframe，请先将以下脚本添加至 <head>，它可为扩展组件加载其他代码：

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

编写标记

在以下示例中，我们创建了一个自适应 amp-iframe 来通过 Google Maps Embed API 嵌入 Google 地图：

<amp-iframe
  width="200"
  height="100"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe"
>
</amp-iframe>

使用占位符

您可以在文档顶部展示 amp-iframe，前提是 amp-iframe 包含具有 placeholder 属性的元素（例如 amp-img 元素）。在 iframe 准备就绪，可以进行展示之前，该元素会以占位符的形式呈现。

延伸阅读：要详细了解占位符，请参阅包含占位符的 iframe。

包含占位符的示例：

<amp-iframe
  width="400"
  height="225"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://giphy.com/embed/OWabwoEn7ezug"
>
  <amp-img
    placeholder
    layout="fill"
    src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"
  ></amp-img>
</amp-iframe>

呈现为：

示例

您可以在 AMP 示例中找到更高级的 amp-iframe 示例。

Written by @pbakaus
with contributions from @Meggin and @bpaduch