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父级共享数据的句子）

如果您尝试将数据从amp-iframe发送到父级，则无效。限制解释如下： https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md

Answer 2

AMP Iframe无法工作，因为amp-iframe可能不会出现在文档顶部附近（如下所述，使用占位符的iframe除外）。当滚动到顶部时，iframe必须距顶部600 px，或者不在视口的前75％之内（以较小者为准）。

当amp-iframe具有占位符元素时，有可能使amp-iframe出现在文档顶部，如下例所示。 amp-iframe必须包含具有占位符属性的元素（例如amp-img元素），该元素将被呈现为占位符，直到准备好显示iframe。有关更多信息，请遵循link。

您正在使用位置固定且在视口的前75％内的灯箱。

在AMP页面中使用压光机的另一种方法是AMP-datepicker。有关更多信息，请遵循link。

AMP IFBox无法使用AMP IFrame

2 个答案: