为什么<amp-iframe>显示溢出子元素？

Question

<amp-iframe id="sample-resizable-iframe"
                    title="Resizable iframe example from 200x200 to 300x300 "
                    width="350"
                    height="450"
                    sandbox="allow-scripts allow-same-origin"
                    resizable
                    frameborder="0"
                    src="xxx/amp-chat.php?orgId=10110&title=Home">
            <amp-img layout="fill" src="xxx/amp-site/placeholder.png" placeholder></amp-img>
            <div overflow tabindex="0" role="button" aria-label="Read more!">Read more!</div>
        </amp-iframe>

enter image description here

有人知道为什么吗？

Answer 1

我不确定，但在使用amp-iframe时，遇到了几个可以回答这个问题的观察结果。

当您具有非固定大小的Iframe时，将使用iframe调整大小。因此，您渲染iframe并使用iframe中的postMessage将其调整为所需的大小。

很多次，我观察到如果你在页面加载时滚动到AMP Iframe位置，甚至在它自己调整到所需大小之前，当它没有完全加载时也是如此。在这种情况下，我观察到它无法自己重新调整大小，并且这个“溢出”按钮出现在它上面。然后，通过单击此按钮，您可以手动调整其大小。否则这个按钮是隐藏的，不会出现在iFrame上。