---
schema_version: "1"
id: 0bf60ecd6b39bc36f717c443e12177e652585767a0ceb63f63bb1173fbd46002
title: 为视图编写嵌入代码
collection: tableau
version: next
locale: zh-cn
portal_url: https://docs.salesforce.com/tableau/next/zh-cn/pro/desktop/embed_code.md
canonical_url: https://help.tableau.com/v0.0/pro/desktop/zh-cn/embed_code.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 585250ebb630d370ceb89f792063a9fa0273f875c30e18d03153a860ff01c758
description: Tableau Server 2022
---
[跳转到主要内容](#main-content)

# 为视图编写嵌入代码

> [!TIP]
> 
> Tableau Server 2022.3 及更高版本以及 Tableau Cloud 的嵌入代码已更改为使用嵌入 API v3。有关如何使用嵌入 API v3 嵌入视图的最新信息，请参见[嵌入 API 帮助](https://help.tableau.com/current/api/embedding_api/zh-cn/index.html)中的[基本嵌入](https://help.tableau.com/current/api/embedding_api/zh-cn/docs/embedding_api_basic.html)。本主题中的信息适用于嵌入的早期版本（使用 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** 的 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 添加筛选器。

> [!TIP]
> 
> **提示：**使用此方法时，请将 HTML 属性 `allowfullscreen="true"` 添加到 iframe 元素以在视图上启用“全屏”按钮。