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

<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=iceland">
  </amp-iframe>

<amp-iframe width=300 height=300
    layout="responsive"
    sandbox="allow-scripts allow-same-origin"
    src="https://foo.com/iframe">
    <amp-img layout="fill" src="https://foo.com/foo.png" placeholder></amp-img>
</amp-iframe>

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-ready'
  }, '*');

iframe 大小调整

<amp-iframe width=300 height=300
    layout="responsive"
    sandbox="allow-scripts allow-same-origin"
    resizable
    src="https://foo.com/iframe">
    <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div>
</amp-iframe>

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

iframe 可见度

iframe 可以将 send-intersections 消息发送至其父级，以开始接收 iframe 与父视口相交部分的 IntersectionObserver 样式 更改记录 。

注意：在以下示例中，我们假设脚本在创建的 iframe 内，其中 window.parent 表示顶部窗口。如果脚本位于嵌套 iframe 内，请将 window.parent 更改为顶部 AMP 窗口。

示例：iframe send-intersections 请求

window.parent.postMessage({
  sentinel: 'amp',
  type: 'send-intersections'
  }, '*');

iframe 可以通过监听来自父窗口的 intersection 消息来接收相交数据。

示例：iframe send-intersections 请求

window.addEventListener('message', function(event) {
  if (event.source != window.parent ||
  event.origin == window.location.origin ||
  !event.data ||
  event.data.sentinel != 'amp' ||
  event.data.type != 'intersection') {
    return;
  event.data.changes.forEach(function (change) {
    console.log(change);

在 iframe 移入或移出视口（或部分可见）时，或者在滚动 iframe 或调整其大小时，iframe 父级会将相交消息发送给 iframe。

跟踪/分析 iframe

我们强烈建议将 amp-analytics 用于分析，因为该解决方案显然更加强大、全面和高效，可为各种分析服务供应商进行配置。

AMP 仅允许每个页面使用一个 iframe 进行分析和跟踪。为了节约资源，这些 iframe 会在加载 5 秒后从 DOM 中移除，这一时间应该足以完成任何需要完成的工作。

如果 iframe 的直接目的看起来不是为用户提供服务（例如，不可见或很小），则标识为跟踪/分析 iframe。

准则：使用现有 AMP 组件而非 amp-iframe

如果在 AMP 中无法通过其他方法获取所需的用户体验，则应将 amp-iframe 组件视为备用方法，也就是说，对于这种用例，现在还没有相应的 AMP 组件 。这是因为针对特定用例使用 AMP 组件有诸多益处，例如：

请参阅 AMP 验证工具规范中的 amp-iframe 规则 。