AMP IFrame 在 AMP LightBox 中不起作用

问题描述

示例:-

 <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>
</amp-lightbox><button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0">在灯箱中打开 iframe</button>

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

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

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

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

 <amp-iframe width="350" height="300" layout="fixed"沙盒=允许脚本允许同源允许弹出"框架边界=0"src="https://ampbyexample.com/"><amp-img 布局 =填充"src="https://placekitten.com/g/300/300"占位符</amp-img></amp-iframe>

更新(添加了关于与 iframe parent 共享数据的语句)

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

Example:-

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

I also tried to manipulate the position of iFrame 75% or 600px from the top but it's also not working.

The AMP iFrame contains Jquery UI Calendar which we want to use to get the delivery date selected by the user in our AMP Page.

Is it possible to get and pass the value in AMP iFrame?

If you are having problems with your iframe displaying, add a placeholder image to your iframe element. This will allow you to circumvent the 75%/600px restriction. You can add a placeholder like this:

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

Updated (added sentence about sharing data with iframe parent)

If you are trying to send data from the amp-iframe to the parent, this will not work. The restriction is explained here: https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md