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 必须距离顶部 600 像素，或者当滚动到顶部时不在视口的第一个 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>

占位符

可以通过添加占位符图像来避免距离顶部 600 像素的约束。

<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 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 编写