AMP IFrame is not working in AMP LightBox

问题

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?

回答1:

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

回答2:

AMP Iframe will not worked because An amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below). The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.

It is possible to have an amp-iframe appear at the top of a document when the amp-iframe has a placeholder element as shown in the example below. The amp-iframe must contain an element with the placeholder attribute, (for instance an amp-img element) which would be rendered as a placeholder until the iframe is ready to be displayed. for more information, please follow the link.

You are using the lightbox which is position fixed and within the first 75% of the viewport.

The alternate way to use calender in AMP page is AMP-datepicker. For More Information, please follow the link.

来源：https://stackoverflow.com/questions/45362639/amp-iframe-is-not-working-in-amp-lightbox