AMP IFrame在AMP LightBox中不起作用 [英] AMP IFrame is not working in AMP LightBox

问题描述

示例:-

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

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

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

AMP iFrame包含我们要用于获取用户在AMP页面中选择的交货日期的Jquery UI日历.

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.

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

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

推荐答案

如果iframe显示出现问题，请在iframe元素中添加一个占位符图像.这样您就可以规避75％/600px的限制.您可以添加一个占位符，如下所示:

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>

已更新(添加了有关与iframe父级共享数据的句子)

如果您尝试将数据从amp-iframe发送到父级，则此操作将无效.限制在这里说明: https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md

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

这篇关于AMP IFrame在AMP LightBox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！