為檢視編寫內嵌程式碼

套用到： Tableau Cloud, Tableau Server

Tableau Server 2022.3 及更高版本和 Tableau Cloud 的內嵌程式碼已變更為使用內嵌 API v3。有關如何使用內嵌 API v3 內嵌檢視的最新資訊，請參閱內嵌 API 說明中的基本內嵌。本主題中的資訊適用於先前版本的內嵌（使用 Tableau JavaScript API v1 和 v2）。

為先前版本的內嵌編寫內嵌程式碼

如果您要編寫您自己的嵌入代碼，則可採用以下兩種方法之一：

  • 使用 Tableau JavaScript：這是首選方法。使用 Tableau 組建的嵌入代碼作為自己代碼的起點，然後新增或編輯用於控制工具列、索引標籤等的物件參數。依賴於 Tableau JavaScript 檔案的預設嵌入代碼也是控制多個嵌入檢視的載入順序的唯一方法。

  • 指定檢視 URL：使用 iframe 或 image 標記來內嵌檢視，來源是您在檢視上按一下 [共用] 時所取得的 URL，再按一下 [複製連結]。如果您無法在網站上使用 JavaScript，則可能需要這樣做。還可能會有您僅指定了 URL 的情況。

在嵌入檢視時，您應定義顯示檢視時將採用的寬度和高度。否則，用戶端瀏覽器將會隨意選取寬度和高度。

附註： 如果您需要在嵌入代碼中為 Tableau Cloud 指定伺服器名稱（舉例來說，用於指向 JavaScript API 的位置），請使用 URL https://online.tableau.com。

使用 Tableau JavaScript

以下代碼顯示當您在已發佈的檢視上按一下 [共用] 時組建的嵌入代碼的範例。host_url 參數中的特殊字元是 URL 編碼的，而 site_root 和 name 參數中的特殊字元被表示為 HTML 數位字元引用。

Tableau Server 範例：

<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> 
							<div class='tableauPlaceholder' style='width:800; height:600;'> 
							<object class='tableauViz' width='800' height='600' style='display:none;'>
							<param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> 
							<param name='site_root' value=&#47;t&#47;Sales' /> 
							<param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
							<param name='tabs' value='yes' /> 
						<param name='toolbar' value='yes' /></object></div>

Tableau Cloud 範例：

<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> 
							<div class='tableauPlaceholder' style='width:800; height:600;'> 
							<object class='tableauViz' width='800' height='600' style='display:none;'>
							<param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> 
							<param name='site_root' value='&#47;t&#47;Sales' /> 
							<param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
							<param name='tabs' value='yes' /> 
							<param name='toolbar' value='yes' />
							</object>
						</div>

<script> 標記的來源是 Tableau Server 和 Tableau Cloud JavaScript 檔案 viz_v1.js 的 URL。JavaScript 檔案負責處理向您的使用者顯示的檢視的完整 URL 的彙編。name 和 site_root 物件參數是唯一的必需參數；所有其他參數都是可選參數。

指定檢視 URL

以下是使用 iframe 內嵌相同檢視的範例，來源是您在檢視上按一下 [共用] 時所取得的 URL，再按一下 [複製連結]。

Tableau Server 範例：

<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard
						?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>

Tableau Cloud 範例：

<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard
						?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>

必須指定 embed URL 參數，並且您可以根據需要包括用於控制工具列和恢復選項等的參數。您還可向用於控制載入檢視時顯示的特定資料的 URL 新增篩選器。

提示：使用此方法時，請將 HTML 屬性 allowfullscreen="true" 新增至 iframe 元素，以啟用檢視上的全螢幕按鈕。

返回頂端
感謝您的意見反應！已成功提交您的意見回饋。謝謝！