无需滚动即可自动加载 amp-iframe

Question

一个页面中有多个 amp-iframe，如下所示：

<amp-iframe width="200" height="300" id="framebox" sandbox="allow-scripts allow-same-origin allow-scripts allow-popups" layout="responsive" src="https://example.com/file.html">    
</amp-iframe>

我想在加载实际页面时加载其中一个 amp-iframe，而不是在 amp-iframe 位于视口中时。

有什么办法可以做到这一点吗？

Answer 1

好的，我找到了解决办法。只需加载带有占位符的 iframe（使用图像或 HTML 标记，即 <p>）。

<amp-iframe width="200" height="300" id="framebox" sandbox="allow-scripts allow-same-origin allow-scripts allow-popups" layout="responsive" src="https://example.com/file.html"> 

<amp-img layout="responsive" src="https://www.example.com/favicon.ico" placeholder="placeholder" width="450" height="450"></amp-img>

</amp-iframe>

我想加载一个 iframe，它将加载脚本并获取 parent window 的位置。但是用户必须向下滚动到 iframe 才能加载 iframe。

因此，我将高度更改为 1 并将其放置在 header 附近的某个位置。

<amp-iframe width="200" height="1" id="framebox" sandbox="allow-scripts allow-same-origin allow-scripts allow-popups" layout="responsive" src="https://example.com/file.html">



<amp-img layout="responsive" src="https://www.example.com/favicon.ico" placeholder="placeholder" width="450" height="450"></amp-img>

</amp-iframe>

无需滚动即可自动加载 amp-iframe

Automatically load amp-iframe without scrolling

iframe

amp-html