Superset嵌入React应用时iframe固定300x150无法自适应问题

我正尝试使用嵌入式SDK将Superset现有仪表盘嵌入React应用中，目前嵌入功能正常，但iframe始终固定为300x150尺寸，无法自适应容器宽高。即便把容器设置为width: 100vw、height: 100vh，实际Superset iframe还是保持默认尺寸。

我的代码如下：

const Dashboard = () => {
  useEffect(() => {
    embedDashboard({
      id: dashboardId, // Superset嵌入UI提供的ID
      supersetDomain: supersetDomain,
      mountPoint: document.getElementById("my-superset-container"), // 可容纳iframe的HTML元素
      fetchGuestToken: () => fetchGuestTokenFromBackend(),
      dashboardUiConfig: {
        // 仪表盘UI配置：hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded（可选）
        hideTitle: true,
        filters: {
          expanded: false
        }
      }
    });
  }, []);
  return (
    <div>
      <p>This is dashboard</p>

      <div
        id="my-superset-container"
        style={{ width: "100vw", height: "100vh" }}
      ></div>
    </div>
  );
};

1. 给容器添加相对定位与溢出隐藏 #

Superset嵌入式iframe默认基于容器定位，给容器添加相对定位能确保iframe正确继承容器尺寸：

<div
  id="my-superset-container"
  style={{
    width: "100vw",
    height: "100vh",
    position: "relative",
    overflow: "hidden"
  }}
></div>

2. 嵌入成功后手动调整iframe样式 #

利用embedDashboard返回的Promise，在嵌入完成后直接修改iframe的尺寸样式：

useEffect(() => {
  const container = document.getElementById("my-superset-container");
  embedDashboard({
    id: dashboardId,
    supersetDomain: supersetDomain,
    mountPoint: container,
    fetchGuestToken: () => fetchGuestTokenFromBackend(),
    dashboardUiConfig: {
      hideTitle: true,
      filters: {
        expanded: false
      }
    }
  }).then(() => {
    const iframe = container.querySelector("iframe");
    if (iframe) {
      iframe.style.width = "100%";
      iframe.style.height = "100%";
      iframe.style.border = "none";
    }
  });
}, []);

3. 确保父容器无尺寸限制 #

检查容器的父级元素是否有固定高度或溢出限制，比如最外层div如果没设置全屏样式，100vh可能无法生效。可以给根容器添加全屏样式：

return (
  <div style={{ width: "100vw", height: "100vh", margin: 0, padding: 0 }}>
    <p>This is dashboard</p>
    <div
      id="my-superset-container"
      style={{
        width: "100%",
        height: "calc(100vh - 2rem)", // 减去p标签高度，避免页面溢出
        position: "relative",
        overflow: "hidden"
      }}
    ></div>
  </div>
);

4. 检查Superset仪表盘布局设置 #

在Superset后台编辑仪表盘时，选择流式布局而非固定尺寸布局，这样嵌入后的仪表盘才能更好地适配容器尺寸。

内容的提问来源于stack exchange，提问作者G Srinivasa