如何创建根据内容调整其高度的 amp-embed？

Question

这与这个问题类似，但我需要动态调整 amp-embed 的高度而不是 amp-frame。

how create AMP iframe adjusts its height according to the content

此页面提供了有关如何调整 amp-frame 高度的清晰示例：

https://amp.dev/documentation/examples/components/amp-iframe/

当我对 amp-embed 执行同样的操作时，不幸的是它不起作用，而且我没有找到类似的 amp-embed 或 amp-ad 说明。

这是放大器框架：

<amp-iframe
  width="300"
  height="10"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin"
  resizable
  frameborder="0"
  src="http://localhost/loader.html"
>
  <div overflow></div>
</amp-iframe>

并且在 loader.html 文件中，在加载内容后，我进行以下调用：

window.parent.postMessage({sentinel: 'amp', type: 'embed-size', height: document.body.scrollHeight},'*');

Answer 1

amp-embed 和 amp-ad 可以使用 requestResize API 调用调整大小。这里有更多信息：

Ads can call the special API window.context.requestResize(width, height, opt_hasOverflow) to send a resize request.

Once the request is processed the AMP runtime will try to accommodate this request as soon as possible, but it will take into account where the reader is currently reading, whether the scrolling is ongoing and any other UX or performance factors.

https://github.com/ampproject/amphtml/blob/main/ads/README.md#ad-resizing

如何创建根据内容调整其高度的 amp-embed？

How to create amp-embed that adjusts its height according to the content?

html

javascript

iframe

amp-html

amp-ad