How do I use the Tableau Javascript API to embed dashboards in a webpage for dashboards hosted in Tableau Online?
Question
I am trying to recreate the example provided by Tableau here with a dashboard that is hosted in Tableau Online. 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.
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. Please refer to the included code. Instead, I'm getting a CORS error:
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?
<!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 answers
solution1
2 ACCPTED 2019-09-24 18:06:51
Ensure that the URL used for embedding the view is from the Share option in Tableau Online:
- In Tableau Online, navigate to the view encountering the problem.
- Click the Share button.
- Copy the URL link within the Link section.
- Configure the embed code to use this URL rather than the Tableau Online URL in the browser address bar.
If it is correct, try to add: <meta http-equiv="X-Frame-Options" content="allow"> in the HTML header
I hope it is helpful, Gigi
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.