Tableau HTML 嵌入在 Chrome 中不起作用答案

【问题标题】：Tableau HTML embed not working in ChromeTableau HTML 嵌入在 Chrome 中不起作用
【发布时间】：2015-01-03 08:00:34
【问题描述】：

我已将 2 个 Tableau 仪表板嵌入到我公司使用的内部网站中。两天前添加它们时，我能够在 Chrome 中查看它们。但是，现在他们曾经所在的页面上只显示一个空白区域。如果我使用 Internet Explorer 8 打开页面，我仍然可以查看嵌入式仪表板。

您对我的嵌入代码为何停止工作有任何想法吗？

我已删除所有 cookie/浏览器历史记录。我可以直接访问仪表板（所以这似乎不是权限问题。）

<script type='text/javascript' src='***TABLEAUWORKBOOKURL***'></script>
<div class='tableauPlaceholder' style='width: 1004px; height: 862px;'>
 <object class='tableauViz' width='1004' height='862' style='display:none;'>
  <param name='host_url' value='https%3A%2F%2Ftableau.***COMPANYNAME***.org%2F' />
  <param name='site_root' value='&#47;t&#47;Sandbox' />
  <param name='name' value='***WORKBOOKNAME***' />
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
 </object>
</div>

谢谢！

【问题讨论】：

查看浏览器控制台窗口，看看是否有任何错误消息。另请注意，脚本 src 标记应引用 Tableau javascript 文件（而不是工作簿 url）。
谢谢！奇怪的是，它现在又开始工作了……虽然我什么也没做。如果它再次发生，这真的是很好的故障排除建议，尤其是因为它是面向公众的（嗯，它不仅仅是我的部门）。（是的......我不是说 URL......我很陌生有了这个，所以感谢您解释该部分实际在做什么。）
还有一点：尽管我很喜欢 StackOverflow，但 Tableau community forums 是回答 Tableau 问题的更好地方。

标签： javascript html google-chrome embed tableau-api

【解决方案1】：

希望这会对您有所帮助。

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>          
            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
            <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-ui-1.10.0.custom.min.js"></script>
            <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
            <script type="text/javascript">
                function initializeViz() {
                 var placeholderDiv = document.getElementById("tableauViz");
                 var url = "http://public.tableausoftware.com/views/WorldIndicators/GDPpercapita";
                 var options = {
                    width: placeholderDiv.offsetWidth,
                    height: placeholderDiv.offsetHeight,
                    hideTabs: true,
                    hideToolbar: true,
                    onFirstInteractive: function () {
                      workbook = viz.getWorkbook();
                      activeSheet = workbook.getActiveSheet();
                    }
                  };
                  viz = new tableauSoftware.Viz(placeholderDiv, url, options);
                  }


function filterSingleValue() {
  activeSheet.applyFilterAsync(
    "Region",
    "The Americas",
    tableauSoftware.FilterUpdateType.REPLACE);
}

                function clearFilters() {
  activeSheet.clearFilterAsync("Region");
  activeSheet.clearFilterAsync("F: GDP per capita (curr $)");
}
            </script>
            <style>
                #tableauViz
                {
                    height: 800px;
                    width: max-content;
                }
            </style>
    </head>
    <body>
        <div id="tableauViz">
                  <p>
                    <button onclick="$(initializeViz);">Run this code</button>
                  </p>
                  <p>
                    <button onclick="$(filterSingleValue);">Filter View</button>
                  </p>
                  <p>
                    <button onclick="$(clearFilters);">Load Default</button>
                  </p>
        </div>
    </body>
</html>

我创建了一个 id 为 tableauViz 的 div，我正在映射 tableau 工作簿及其所需参数以使用 javascript 加载初始 viz。

这个方法对我来说很好。

【讨论】：