AMP IFrame ne fonctionne pas dans l'AMP LightBox

Question

Exemple: -

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

J'ai essayé aussi de manipuler la position de iFrame 75% ou 600px de haut mais il ne fonctionnait pas. L'iFrame AMP contient le calendrier d'interface utilisateur Jquery que nous voulons utiliser pour obtenir la date de livraison sélectionnée par l'utilisateur dans notre page AMP.

Est-il possible d'obtenir et de transmettre la valeur dans AMP iFrame?

Answer 1

Si vous rencontrez des problèmes avec l'affichage de votre iframe, ajoutez une image d'espace réservé à votre élément iframe. Cela vous permettra de contourner la restriction de 75%/600px. Vous pouvez ajouter un espace réservé comme celui-ci:

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

Mise à jour (phrase ajoutée sur les données de partage avec les parents iframe)

Si vous essayez d'envoyer des données de l'ampli-iframe au parent, cela ne fonctionne pas. La restriction est expliquée ici: https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md