获取嵌入式 Tableau 仪表板的 Window 高度

Question

我的仪表板初始化并完全加载后，我需要获取 iframe 内嵌入的 window 高度。理想情况下，我想在 onFirstInteractive 中获取 innerHeight，但我做不到。

function initViz() {
    var containerDiv = document.getElementById("vizContainer");
    var url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms";

    var options = {
        onFirstInteractive: function() {           
            // How do I get the height of the rendered contents?
        }
    };

    var viz = new tableau.Viz(containerDiv, url, options);
}

Answer 1

订阅 VIZ_RESIZE 事件，它在初始化和调整大小时提供 iframe 的新尺寸：

viz.addEventListener(tableau.TableauEventName.VIZ_RESIZE, function(event) {
    console.log(event.getAvailableSize());
});

给出以下内容：

当iframe出现时：

如果你绝对想检索onFirstInteractive中的信息，你可以这样做：

onFirstInteractive: function(viz) {           
    const iframeStyle = viz.._impl.h.style;
    const { height, width } = iframeStyle;
    console.log({ height, width });
}

但这有点老套，因为此解决方案使用了不应该 public 的属性，因此此类代码可能会在未来的 Tableau JS 库更新中中断。

获取嵌入式 Tableau 仪表板的 Window 高度

Getting the Window Height of an Embedded Tableau Dashboard

javascript

iframe

tableau-api