---
url: /v6.2/en-us/embed/events.md
---
# Embedded Page Events
## External Controls for Embedded Pages
HENGSHI SENSE supports the use of external buttons to operate embedded pages, including refreshing page content, exporting pages as PDF, PNG, etc.
### Refresh Page
When a client-embedded page needs to refresh dashboard data without reloading the iframe, an external button can be used for the refresh. Below is a code example and display style for refreshing an embedded page via an external button for your reference.
```html
Document
```
### Export Dashboard PDF/PNG
Embedded pages can export the dashboard as PDF and PNG via external buttons. Below is a code example and a demonstration screenshot.
```html
Document
```
## Listening to Embedded Page Events
During page interactions, use postMessage to broadcast the following events to better integrate with business processes. On the business page, use
```js
window.addEventListener('message', function handlePostMessage(event) {});
```
to listen to the events we broadcast. Currently, the embedded scenario supports the following events:
1. Directory and application changes, including the addition, modification, and deletion of directory folders and applications, as well as application republishing.
2. Clicking on system elements, where the target objects are applications, folders, dashboards, charts, and datasets.
3. URL change. The `handlePostMessage` receives an event of type JavaScript `MessageEvent`, where `event.data` is the broadcast content. `event.data` is a serialized JSON string, which can be used after being parsed with `JSON.parse(event.data)`.
### Directory and Application Changes
Directory and application changes convey information through the following structure, where `data` is a stringified object. After `JSON.parse`, the information can be obtained.
* `data.event` is the event type, including `updateFolder` for folder changes, `updateApp` for application changes, and `updatePublish` for application publishing changes.
* `data.data` contains the specific details of the event, including `insert`, `update`, `delete`, and `duplicate` types.
```javascript
{
// HENGSHI Interactive Event Standard
"event": "HengshiInteractiveEvent",
"type": "HengshiInteractiveEvent",
"data": {
// Event type: add, delete, or modify directory 'updateFolder'; add, delete, or modify application 'updateApp'; update publishing 'updatePublish'
"event": "updateFolder",
// Specific event details: insert, update, delete, duplicate
"data": "insert_2198",
}
}
```
### Click System Elements
```javascript
// After JSON.parse(event.data):
{
event: 'HengshiInteractiveEvent',
data: {
event: 'clickItem',
data: {
type: 'app',
data: {
id: xxx,
...
},
},
},
}
```
Where `type` refers to the type of the clicked element. In addition to `app`, it can also be:
* publishApp: Published App
* dashboard: Dashboard
* chart: Chart
* publishChart: Published Chart
* dataset: Dataset
* folder: Folder
* datamart: Datamart