在 iframe 中嵌入 Metabase 问题会显示标题、图例和控件，但不会显示内容

Posted 2023-05-08

【中文标题】在 iframe 中嵌入 Metabase 问题会显示标题、图例和控件，但不会显示内容

【英文标题】：Embedding a Metabase question in an iframe shows headers, legends and controls but not content

【发布时间】：2020-03-10 04:55:48

【问题描述】：

我在将来自 Metabase 0.34.2 服务器的问题嵌入 iframe 时遇到问题。当我嵌入问题时，我嵌入的项目的主体被隐藏并设置为绝对位置和高度太小而无法看到。

不知道有没有人遇到过这个问题，有没有解决办法？

我已经构建了一个小的 Sharepoint React 应用程序，它在 iframe 中嵌入了 Metabase 仪表板和问题（使用 react-iframe-resizer-super）。使用此应用程序可以很好地嵌入元数据库仪表板并调整其大小，但是我要嵌入的两个元数据库问题会呈现除“正文”内容之外的所有内容。

这是使用 resizer 生成嵌入 iframe 的主要代码：

const iframeResizerOptions = 
   
    checkOrigin: false, 
    minHeight: 400,
    log: true
  ;

function getMetabaseURL(props: IHelloDashProps) 
  var jwt = require("jsonwebtoken");
  var METABASE_SITE_URL = "https://metabase.blahblah.org";
  var METABASE_SECRET_KEY = props.secretkey;
  var payload =  
    resource:  [props.dashboardorquestion]: Number(props.dashboardid) ,
    params: ,
    exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
  ;
  console.log('Debug Payload: ' + JSON.stringify(payload));
  var token = sign(payload, METABASE_SECRET_KEY);
  var iframeUrl = METABASE_SITE_URL + "/embed/" + props.dashboardorquestion + "/" + token;
  return(iframeUrl);


export default function HelloDash(props: IHelloDashProps) 
  return (
    <ReactIframeResizer iframeResizerOptions=iframeResizerOptions src=getMetabaseURL(props)>
    </ReactIframeResizer>
  );

我的第一个可嵌入问题是在 Metabase UI 中查看时显示 12 行的表格，或者在选项卡中单独显示嵌入 URL。当我将该问题嵌入到上述可调整大小的 iframe 中时，它只会在表格中呈现 1 行，并且该行是不可见的，因为它具有绝对定位和高度 0。表格控件显示 - “12 行中的第 1-1 行” - 但只有一个当我希望所有 12 行都以 html 呈现时，这是不可见的行。

如果我更改呈现的 HTML 以从表格周围的 div 中删除绝对类（认为我可以修改源），则显示单行。但是我仍然有一个问题，即 12 行中只有 1 行渲染到 DOM 中，而不是全部 12 行。

<div class="absolute top bottom left right scroll-x scroll-show scroll-show--hover" style="overflow-y: hidden;">

我还有一个带有图例和面积线图的嵌入式问题。它再次在 Metabase 和它自己的选项卡中呈现良好，但是当我使用 react-iframe-resizer-super 嵌入 iframe 时，标题和图例是可见的，但图形主体设置为高度 0 并且不可见。

我可以破解呈现的 HTML（如下）以删除 position: absolute 并指定固定高度以显示线图。

<div style="position: absolute; top: 0px; left: 0px; width: 732.358px; height: 0px;">

在我缺少的 iframe 中嵌入 Metabase 问题是否有任何提示和技巧？

【参考方案1】：

iframe-resizer-react 也有同样的问题。 我没有解决问题，但一种解决方法是不使用iframe-resizer-react，并依靠 react 重绘窗口的能力以及正常的 css 样式。高度是固定的，但宽度会自动调整大小。

<iframe
  src=iframeUrlChart
  frameBorder=0
  height=600
  style= width: '1px', minWidth: '100%'
/>