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 地图嵌入 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 sandbox 属性。
amp-iframe 必须定义 resizable 属性。
amp-iframe 必须具有一个 overflow 子元素。
iframe 文档必须发送 embed-size 请求

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

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

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

点击以显示更多

<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