包含 iframe
重要提示：此文档不适用于您当前选择的格式 email！
了解如何在您的页面中显示包含的媒体内容，以及如何使用 iframe 显示 AMP 限制之外的高级内容。
基础知识
您可以使用 amp-iframe 元素在您的页面中显示 iframe。
iframe 在 AMP 中特别有用，可以显示主页面上下文中不支持的内容，例如需要用户编写的 JavaScript 的内容。
amp-iframe 的要求
- 必须距离顶部至少 600 像素 或第一个视口的 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 包含一个带有 placeholder 属性的元素（例如，一个 amp-img 元素），则您可以在文档顶部显示 amp-iframe，该元素将作为占位符呈现，直到 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 示例。