---
url: /v6.2/embed/events.md
---
# 嵌入页面事件控制
## 嵌入页面的外部控制
衡石支持使用外部按钮来操作嵌入页面，包括刷新页面内容、导出页面 PDF、PNG 等。
### 刷新页面
客户嵌入的页面需要刷新仪表盘数据，但是又不希望重新加载 iframe，此时可以通过外部按钮进行刷新。下面是通过外部按钮刷新嵌入页面的代码示例和展示样式，供参考。
```html
Document
```
### 导出仪表盘 PDF/PNG
嵌入页面可以通过外部按钮导出仪表盘的 PDF 和 PNG。下面是相关代码示例和展示截图。
```html
Document
```
## 监听嵌入页面的事件
在页面交互过程中，使用 postMessage 广播以下事件以方便更好的与业务融合，在业务页面使用
```js
window.addEventListener('message', function handlePostMessage(event) {});
```
来监听我们广播出的事件。目前嵌入场景支持以下事件。
1. 目录、应用变更，包括目录文件夹、应用的新增、修改和删除，应用重新发布。
2. 点击系统元素，点击对象为应用、文件夹、仪表盘、图表、数据集
3. URL change `handlePostMessage` 收到的 event 是 JavaScript 的 `MessageEvent`，其中 `event.data` 即为广播内容，`event.data` 是经过序列化的 JSON 字符串，经过 `JSON.parse(event.data)` 即可使用。
### 目录、应用变更
目录、应用变更通过以下结构传递信息，其中 data 是 stringify 的对象，JSON.parse 后可以得到该信息。
* data.event 是事件类型，包括 updateFolder 文件夹变更、updateApp 应用变更、updatePublish 应用发布变更三种类型。
* data.data 是事件的具体信息，包括 insert、update、delete、duplicate 四种类型。
```javascript
{
// 衡石交互事件标准
"event": "HengshiInteractiveEvent",
"type": "HengshiInteractiveEvent",
"data": {
// 事件类型，增删改目录 'updateFolder'；增删改应用 'updateApp'; 更新发布 'updatePublish'
"event": "updateFolder",
// 事件的具体信息，insert、update、delete、duplicate
"data": "insert_2198",
}
}
```
### 点击系统元素
```javascript
// JSON.parse(event.data) 后：
{
event: 'HengshiInteractiveEvent',
data: {
event: 'clickItem',
data: {
type: 'app',
data: {
id: xxx,
...
},
},
},
}
```
其中 `type` 是指所点击元素的类型，除 app 外还有
* publishApp: 发布的应用
* dashboard: 仪表盘
* chart: 图表
* publishChart: 发布的图表
* dataset: 数据集
* folder: 文件夹
* datamart: 数据包