包含 iframe

了解如何在您的页面中显示包含的媒体内容，以及如何使用 iframe 在 AMP 限制之外显示高级内容。

基础知识

您可以使用 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 地图嵌入 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 By Example 中找到更高级的 amp-iframe 示例。

由 @pbakaus 撰写
由 @Meggin 和 @bpaduch 贡献