Include iframes

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