on：点击在 AMP 中添加 iframe答案

【问题标题】：on:tap adding a iframe in AMPon：点击在 AMP 中添加 iframe
【发布时间】：2021-01-08 16:14:30
【问题描述】：

我创建了一个 AMP 页面，我必须在其中添加一个具有 PDF 的 iframe 才能显示，

里面有两个问题：-

如何通过 on:tap 事件在 amp 中添加 iFrame（如果用户单击按钮，则应添加 iframe）
是否允许在 amp 页面中将非 AMP 页面添加为 iframe。

【问题讨论】：

我得到了第二个问题的答案 non-AMP iframe is allowed but that shuld use https and it will be load async.
1.关于您的第一个问题：添加您的代码，我会尽力帮助您。
@AlexandrKazakov 只有 AMP 页面没有代码，我想要一个基于事件的操作，如果访问者来点击“ReadPDF”按钮，页面中就会添加一个 iframe 标签。我不想更改 iframe 中的 src 并使其可见。

标签： html iframe amp-html

【解决方案1】：

如何通过 on:tap 事件在 amp 中添加 iFrame（如果用户单击按钮，则应添加 iframe）

试试这样的：

<!DOCTYPE html>
<html ⚡>

<head>
  <meta charset="utf-8" />
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both;
    }

    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @-moz-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @-ms-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @-o-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }
  </style>
  <noscript>
    <style amp-boilerplate>
      body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none;
      }
    </style>
  </noscript>
  <style amp-custom>
    .wrapper {
      max-width: 700px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <main class="wrapper">
    <h1>My AMP Tap iframe</h1>
    <button type="button" on="tap:AMP.setState({ myIframeUrl: 'https://docs.google.com/gview?url=http%3A%2F%2Fwww.pdf995.com%2Fsamples%2Fpdf.pdf&embedded=true' })" [hidden]="myIframeUrl">Load my PDF iframe</button>
    <amp-iframe sandbox="allow-scripts allow-same-origin" src="https://google.com/" width="1" height="1" layout="responsive" [src]="myIframeUrl" [hidden]="!myIframeUrl" hidden>
      <div placeholder>PDF coming</div>
    </amp-iframe>
  </main>
</body>

</html>

现场演示： https://codepen.io/alexandr-kazakov/pen/wvzjqbj

是否允许在 amp 页面中将非 AMP 页面添加为 iframe。

当然，例如，我们可以将谷歌地图或 YouTube 播放器插入 amp-iframe，尽管它们与 AMP 无关。

【讨论】：

我正在考虑添加整个 iframe 以更改 src url，因此可以减少一个请求是否有办法添加相同的内容，无论如何谢谢，这对我有帮助。
这是否适用于 amp-youtube 组件加载缩略图图像并在单击后加载视频？