Question

我正在尝试使用Tableau Online中托管的仪表板重新创建the example provided by Tableau here。我尝试关注的是Tableau talks about modifying the URL of the JS API based on where the dashboard is hosted的另一篇文章。

即使生成的嵌入内容需要显示登录信息，我仍希望该登录信息显示在我网页上的嵌入式输出/ 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>

Answer 1

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

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

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

我希望它会有所帮助，吉吉

如何使用Tableau Javascript API将仪表板嵌入到Tableau Online中托管的仪表板的网页中？

1 个答案: