html - iframe 的大小未在嵌入式仪表板上动态调整

Question

我们有一个在 iframe 中显示的 Qucksight 仪表板

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="3200px" overflow="auto" width="100%" frameborder="0"></iframe>

iframe 得到正确显示，仪表板也出现。现在仪表板本身有多个选项卡，而每个选项卡包含不同长度的不同内容。

如上所示，高度手动设置为固定的 3200px，这将导致内容较少的选项卡有大量空白空间

现在我尝试将高度设置为 100% 和 auto

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="100%" overflow="auto" width="100%" frameborder="0"></iframe>

两者都给出了以下结果

我需要做什么才能让仪表板以全高显示(在切换选项卡时动态调整)？

更新

将 iframe 包装在

<div height="100%" width="100%"><iframe...></iframe></div>

结果如下

更新 2

按如下方式在样式中添加高度解决了问题

<iframe src="..." style="height: 100vh; width: 100%; scrolling: no; frameborder: 0"></iframe>'

但它创建了一个双滚动条(一个用于实际的 iframe，一个用于页面)

Answer 1

您可以使用 Amazon QuickSight JavaScript SDK 生成这些 iframe:

https://www.npmjs.com/package/amazon-quicksight-embedding-sdk

并将高度参数设置为 AutoFit 以根据实际仪表板内容高度自动缩放。

例子:

height: "AutoFit",
loadingHeight: '700px',