---
url: /v6.2/iframe.md
---
# 网页控件

仪表盘在展示时，除了展示业务相关的图表数据外，还需要在页面内展示其他三方网页信息。而网页控件的核心功能是允许用户在当前仪表盘界面中集成外部网页资源，实现跨页面的信息整合或功能扩展。

## 网页控件的配置

* 在创作页面，点击工具栏里的“更多->网页”，可添加网页控件；由于网页控件比较消耗性能，因此一个仪表盘页面最多添加5个网页控件。
  ![](/images/iframe-001.png)

![](/images/iframe-002.png)

* 在交互处可以设置“网页内的点击交互设置”
  * 启用：当状态为“启用”时，在预览态/发布态下可以对网页控件里的内容点击操作
  * 禁用：当状态为“禁用”时，在预览态/发布态下无法对网页控件里的内容点击操作
    ![](/images/iframe-003.png)

## 网页控件的引用

* 当网页控件填写的URL没有拼接参数时，仪表盘内的参数控件是无法对网页控件里的内容进行过滤的。
  例：`https://preview.hengshi.com/public/18001/dashboard/1`

![](/images/iframe-004.png)

* 6.1版本可以通过参数控件对网页控件URL中的参数值进行控制；当网页控件填写的URL拼接了参数时，仪表盘内的参数控件可以对网页控件里的内容进行过滤。
  例：`https://preview.hengshi.com/preview/18001/dashboard/1?appParam=%5B%7B%22appId%22%3A18001%2C%22name%22%3A%22%E6%96%87%E6%9C%AC%E5%8F%82%E6%95%B0%22%2C%22value%22%3A%22{{%文本参数}}%22%7D%5D`

![](/images/iframe-005.png)

![](/images/iframe-006.png)

* 通过参数控件对网页控件URL中的参数值进行控制，各种参数控件的使用规范示例：

> 注：使用URL动态传参时，Value的值不能被encode，其余的值需要encode
> :::code-group

```[普通参数控件]
?appParam=%5B%7B%22appId%22%3A136994%2C%22name%22%3A%22%E6%96%87%E6%9C%AC%E5%8F%82%E6%95%B0%22%2C%22value%22%3A%22{{%文本参数}}%22%7D%5D
```

:::

:::code-group

```[日期范围参数控件]
?appParam=%5B%20%7B%20%22appId%22%3A%20136994%2C%20%22name%22%3A%20%22%E5%BC%80%E5%A7%8B%E6%97%A5%E6%9C%9F%22%2C%20%22value%22%3A%20%22{{%开始日期}}%22%20%7D%2C%20%7B%20%22name%22%3A%20%22%E7%BB%93%E6%9D%9F%E6%97%A5%E6%9C%9F%22%2C%20%22value%22%3A%20%22{{%结束日期}}%22%20%7D%20%5D
```

:::

:::code-group

```[树形参数控件]
?appParam=%5B%20%7B%20%22appId%22%3A%20136631%2C%20%22name%22%3A%20%22%E5%9C%B0%E5%8C%BA%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0%22%2C%20%22value%22%3A%20%22{{%文本动态参数}}%22%20%7D%2C%20%7B%20%22name%22%3A%20%22%E6%95%B0%E5%AD%97%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0%22%2C%20%22value%22%3A%22{{%数字动态参数}}%22%20%7D%2C%20%7B%20%22name%22%3A%20%22%E6%97%B6%E9%97%B4%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0%22%2C%20%22value%22%3A%20%22{{%时间动态参数}}%22%20%7D%20%5D
```

:::