时间戳

首页 > 解决方案 > 对于 Tableau Online 中托管的仪表板，如何使用 Tableau Javascript API 将仪表板嵌入网页中？

javascript - 对于 Tableau Online 中托管的仪表板，如何使用 Tableau Javascript API 将仪表板嵌入网页中？

问题描述

我正在尝试使用 Tableau Online 中托管的仪表板重新创建Tableau 在此处提供的示例。Tableau 的另一篇文章讨论了根据仪表板的托管位置修改 JS API 的 URL，我已尝试遵循该文章。

尽管生成的嵌入应该需要显示登录名，但我希望登录名显示在我网页上的嵌入输出/iframe 中。请参阅包含的代码。相反，我收到了CORS错误：

拒绝显示' https://10ay.online.tableau.com/site/jpl/views/JPLDashboard_V05_JUE/Awareness?:iid=2&:size=800,700&:embed=y&:showVizHome=n&:bootstrapWhenNotified=y&:tabs= n&:apiID=host0#navType=1&navSrc=Parse '在一个框架中，因为它将'X-Frame-Options'设置为'sameorigin'。

我采取的方法正确吗？如果可以使用其 JS API 嵌入 Tableau Online 仪表板，我该如何避免 CORS 错误？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>JPL Dashboard</title>
    <script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
        <script type="text/javascript">
          function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
              //url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
              url = "https://10ay.online.tableau.com/site/jpl/views/JPLDashboard_V05_JUE/Awareness?:iid=2",
              options = {
                hideTabs: true,
                onFirstInteractive: function() {
                  console.log("Run this code when the viz has finished loading.");
                }
              };

            var viz = new tableau.Viz(containerDiv, url, options);
          }
        </script>
</head>
<body>
    <div id="vizContainer" style="width:800px; height:700px;"></div>
    <script type="text/javascript">
        (function () {
            window.onload = function () {
                initViz();
            };
        })();
    </script>
</body>
</html>

标签： javascriptapicross-domainembedtableau-api

解决方案

确保用于嵌入视图的 URL 来自 Tableau Online 中的“共享”选项：

  1. 在 Tableau Online 中，导航到遇到问题的视图。
  2. 单击共享按钮。
  3. 复制链接部分中的 URL 链接。
  4. 将嵌入代码配置为使用此 URL，而不是浏览器地址栏中的 Tableau Online URL。

如果正确，请尝试<meta http-equiv="X-Frame-Options" content="allow">在 HTML 标头中添加：

我希望它是有帮助的，吉吉

推荐阅读