对于 Tableau Online 中托管的仪表板，如何使用 Tableau Javascript API 将仪表板嵌入网页中？
Posted
技术标签:
【中文标题】对于 Tableau Online 中托管的仪表板，如何使用 Tableau Javascript API 将仪表板嵌入网页中？【英文标题】：How do I use the Tableau Javascript API to embed dashboards in a webpage for dashboards hosted in Tableau Online? 【发布时间】：2020-01-24 19:35:57 【问题描述】：我正在尝试使用 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>
【问题讨论】：
【参考方案1】：确保用于嵌入视图的 URL 来自 Tableau Online 中的“共享”选项：
-
在 Tableau Online 中，导航到遇到问题的视图。
单击“共享”按钮。
复制链接部分中的 URL 链接。
将嵌入代码配置为使用此 URL，而不是浏览器地址栏中的 Tableau Online URL。
如果正确，尝试在HTML头部添加：<meta http-equiv="X-Frame-Options" content="allow">
希望对你有帮助 吉吉
【讨论】：
这行得通，谢谢。您是否知道 Tableau JS API 是否提供对其中任何元素（div 等）的访问？由于跨域问题，无法选择 iframe。以上是关于对于 Tableau Online 中托管的仪表板，如何使用 Tableau Javascript API 将仪表板嵌入网页中？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Tableau Online 中删除文本表上的水平线？