amp-iframe

简介

使用 amp-iframe 通过 iframe 将内容嵌入 AMP 文件中。适用于显示 AMP 尚未（或不支持）的内容。

我们在这里使用 Vimeo 嵌入作为示例，但任何类型的内容都有效。如果您对在 AMP 中嵌入 Vimeo 感兴趣，建议您改用提供的 amp-vimeo 组件。

在标头中导入 amp-iframe 组件。

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

您可以使用 amp-bind 扩展来动态更改 iframe src。

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

首个视口

当滚动到顶部时，iframe 必须距离顶部 600px 或不在视口的前 75% 以内 - 以较小者为准。此示例可能无法正常工作，具体取决于您的屏幕宽度。在这种情况下，它将仅显示加载指示器。

<amp-iframe width="500" height="281" title="Netflix House of Cards branding: The Stack" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/140261016">
</amp-iframe>

占位符

通过添加占位符图像可以避免距离顶部 600px 的限制。

<amp-iframe width="500" height="281" title="Netflix House of Cards branding: The Stack" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/140261016">
  <amp-img layout="fill" src="https://i.vimeocdn.com/video/536538454_640.webp" placeholder></amp-img>
</amp-iframe>

Giphy

这是另一个 iframe 示例，嵌入来自 Giphy 的动画 GIF。

<amp-iframe width="600" height="400" title="Animated dancing GIF from Giphy" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://giphy.com/embed/DKG1OhBUmxL4Q">
</amp-iframe>

Google 地图

可以通过 Google Maps Embed API 嵌入 Google 地图，并且需要一个 API 密钥。请确保您的 API 密钥允许来自 ampproject.org 域的请求。

<amp-iframe width="600" height="400" title="Google map pin on Googleplex, Mountain View CA" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyAyAS599A2GGPKTmtNr9CptD61LE4gN6oQ">
</amp-iframe>

可调整大小的 iframe

amp-iframe 的一个重要功能是能够在运行时调整 iframe 的大小。要使其工作，请执行以下操作

amp-iframe 必须设置 allow-same-origin 沙箱属性。
必须使用 resizable 属性定义 amp-iframe。
amp-iframe 必须具有 overflow 子元素。
iframe 文档必须发送 embed-size 请求

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
}, '*');

以下示例演示了两个调整大小的用例

加载时调整大小：iframe 大小最初通过 amp-iframe 布局设置为 150x150px。在页面加载时，嵌入的 iframe 将自行调整大小为 200x200px。
在用户交互时调整大小：按下按钮会将 iframe 的大小调整为 300x300px。

点击以显示更多

<amp-iframe id="sample-resizable-iframe" title="Resizable iframe example from 200x200 to 300x300 " width="150" height="150" sandbox="allow-scripts allow-same-origin" resizable frameborder="0" src="https://preview.amp.dev/static/samples/files/resizable-iframe.html">
            <div overflow tabindex="0" role="button" aria-label="Show more">Click to show more</div>
</amp-iframe>

动态更改 iframe src

借助 amp-bind，可以更改使用 amp-iframe 嵌入的 iframe 的 src。

<amp-iframe id="amp-iframe" title="Cute dog video" width="500" height="281" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/183849543" [src]="myIframeUrl">
</amp-iframe>
<button on="tap:AMP.setState({ myIframeUrl: 'https://player.vimeo.com/video/185199565' })">Change src</button>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为特别感兴趣的问题提供一次性贡献。

在 GitHub 上编辑示例

由 @sebastianbenz 编写