Tableau HTML嵌入在Chrome中无法使用

时间:2014-11-06 17:36:59

标签: javascript html google-chrome embed tableau

我已将2个Tableau仪表板嵌入到我公司使用的内部网站中。我在2天前添加它们时可以在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>

谢谢!

1 个答案:

答案 0 :(得分:0)

希望这会对你有所帮助。

<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。

这种方法适用于我。