当amp-iframe在视口中时，如何使amp-iframe的高度在amp上动态？

当amp-iframe在视口中时，可以通过使用amp-bind来实现amp-iframe的高度在amp上动态变化。

amp-bind是AMP框架提供的一种数据绑定方式，可以将数据与页面元素进行关联，实现动态更新。要使amp-iframe的高度在amp上动态变化，可以按照以下步骤进行操作：

1. 在页面头部引入amp-bind组件：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

1. 在amp-iframe标签中使用amp-bind来绑定高度属性：

<amp-iframe width="500" height="200" layout="responsive" sandbox="allow-scripts allow-same-origin" src="https://example.com" resizable
  [height]="iframeHeight">
</amp-iframe>

在上述代码中，通过[height]="iframeHeight"将amp-iframe的高度与一个变量iframeHeight进行绑定。

1. 在页面中定义一个用于控制amp-iframe高度的变量：

<button on="tap:AMP.setState({ iframeHeight: '400' })">设置高度为400px</button>
<button on="tap:AMP.setState({ iframeHeight: '600' })">设置高度为600px</button>

在上述代码中，通过按钮的点击事件来改变iframeHeight变量的值，从而实现amp-iframe高度的动态变化。

通过以上步骤，当amp-iframe在视口中时，点击按钮可以动态改变amp-iframe的高度。这种方式可以根据实际需求来动态调整amp-iframe的高度，提供更好的用户体验。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云CDN加速服务。腾讯云云服务器提供高性能、可扩展的云计算服务，可满足各种规模的业务需求；腾讯云CDN加速服务可以提供全球加速、高可用、安全稳定的内容分发网络，加速网站和应用的访问速度。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云CDN加速服务产品介绍链接地址：https://cloud.tencent.com/product/cdn