如何使用 Tableau Javascript API 將儀表板嵌入到 Tableau Online 中托管的儀表板的網頁中？

Question

我正在嘗試使用 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>

Answer 1

確保用於嵌入視圖的 URL 來自 Tableau Online 中的“共享”選項：

在 Tableau Online 中，導航到遇到問題的視圖。
單擊共享按鈕。
復制鏈接部分中的 URL 鏈接。
將嵌入代碼配置為在瀏覽器地址欄中使用此 URL 而不是 Tableau Online URL。

如果正確，嘗試在HTML header中添加： <meta http-equiv="X-Frame-Options" content="allow">

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

如何使用 Tableau Javascript API 將儀表板嵌入到 Tableau Online 中托管的儀表板的網頁中？

問題描述

1 個解決方案

解決方案1
2 已采納 2019-09-24 18:06:51

如何使用 Tableau Javascript API 將儀表板嵌入到 Tableau Online 中托管的儀表板的網頁中？

問題描述

1 個解決方案

解決方案1 2 已采納 2019-09-24 18:06:51

解決方案1
2 已采納 2019-09-24 18:06:51