AMP IFrame 在 AMP LightBox 中不起作用

Question

例子：-

  <amp-lightbox id="my-lightbox" layout="nodisplay">
    <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
      <amp-iframe width="350" height="300" layout="fixed" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://ampbyexample.com/"></amp-iframe>
    </div>
 </amp-lightbox>

<button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0">Open Iframe in Lightbox</button>

我还尝试从顶部操纵 iFrame 75% 或 600px 的位置，但它也不起作用。

AMP iFrame 包含 Jquery UI 日历，我们希望使用它来获取用户在我们的 AMP 页面中选择的交付日期。

是否可以在 AMP iFrame 中获取和传递值？

Answer 1

如果您的 iframe 显示有问题，请将占位符图像添加到 iframe 元素。这将允许您绕过 75%/600px 限制。您可以添加这样的占位符：

  <amp-iframe width="350" height="300" layout="fixed" 
              sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" 
              src="https://ampbyexample.com/">
    <amp-img layout="fill"
             src="https://placekitten.com/g/300/300"
             placeholder></amp-img>
  </amp-iframe>

更新（添加了关于与 iframe parent 共享数据的句子）

如果您尝试将数据从 amp-iframe 发送到父级，这将不起作用。此处解释了限制：https : //github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md