如何使用 Tableau Javascript API 将仪表板嵌入到 Tableau Online 中托管的仪表板的网页中？
[英]How do I use the Tableau Javascript API to embed dashboards in a webpage for dashboards hosted in Tableau Online?
问题描述
I am trying to recreate the example provided by Tableau here with a dashboard that is hosted in Tableau Online.
我正在尝试使用 Tableau Online 中托管的仪表板重新创建Tableau 在此处提供的示例。 A separate article from Tableau talks about modifying the URL of the JS API based on where the dashboard is hosted , which I've tried to follow. Tableau 的另一篇文章讨论了根据仪表板的托管位置修改 JS API 的 URL ，我试图遵循。
Even though the resulting embed should require a login to be displayed, I expect that login to be displayed in that embedded output/iframe on my webpage.尽管生成的嵌入应该需要显示登录名，但我希望登录名显示在我网页上的嵌入输出/iframe 中。 Please refer to the included code.请参阅包含的代码。 Instead, I'm getting a CORS error:相反，我收到CORS错误：
Refused to display ' 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 ' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Is the approach I'm taking correct?我采取的方法正确吗？ If embedding Tableau Online dashboards is possible with their JS API, how do I avoid the CORS error?如果可以使用 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 个解决方案
解决方案1
2 已采纳 2019-09-24 18:06:51
Ensure that the URL used for embedding the view is from the Share option in Tableau Online:确保用于嵌入视图的 URL 来自 Tableau Online 中的“共享”选项：
- In Tableau Online, navigate to the view encountering the problem.在 Tableau Online 中，导航到遇到问题的视图。
- Click the Share button.单击共享按钮。
- Copy the URL link within the Link section.复制链接部分中的 URL 链接。
- Configure the embed code to use this URL rather than the Tableau Online URL in the browser address bar.将嵌入代码配置为在浏览器地址栏中使用此 URL 而不是 Tableau Online URL。
If it is correct, try to add: <meta http-equiv="X-Frame-Options" content="allow"> in the HTML header如果正确，尝试在HTML header中添加： <meta http-equiv="X-Frame-Options" content="allow">
I hope it is helpful, Gigi我希望它是有帮助的，吉吉
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.