主题
嵌入页面的外部控制
衡石支持使用外部按钮来操作嵌入页面，包括刷新页面内容、导出页面 PDF、PNG 等。
刷新页面
客户嵌入的页面需要刷新仪表盘数据，但是又不希望重新加载 iframe，此时可以通过外部按钮进行刷新。下面是通过外部按钮刷新嵌入页面的代码示例和展示样式，供参考。
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Refresh</button>
<iframe
frameborder="0"
importance="high"
allowFullScreen="true"
width="1080"
height="800"
src="https://develop.hengshi.org/private/share/app/EAD43BC71B87137928BB1D7D62E639078">
</iframe>
<script>
const button = document.querySelector('button');
// 1. 从 iframe 外部点击按钮
button.addEventListener('click', () => {
const iframe = document.querySelector('iframe');
// 2. 给 iframe 发送刷新仪表盘的信息
iframe.contentWindow.postMessage(JSON.stringify({
event: 'dispatchCustomEvent',
// 3. 刷新仪表盘标识符 `hs_dashboard_refresh`
data: ['hs_dashboard_refresh', {}]
}), '*');
});
</script>
</body>
</html>
导出仪表盘 PDF/PNG
嵌入页面可以通过外部按钮导出仪表盘的 PDF 和 PNG。下面是相关代码示例和展示截图。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="exportPNG">Export PNG</button>
<button id="exportPDF">Export PDF</button>
<iframe
frameborder="0"
importance="high"
allowFullScreen="true"
width="1080"
height="800"
src="https://develop.hengshi.org/private/share/app/EAD43BC71B87137928BB1D7D62E639078">
</iframe>
<script>
document.addEventListener('click', e => {
if (!['exportPNG', 'exportPDF'].includes(e.target.id)) return;
// 获取导出类型、pdf 或 png
const type = e.target.id === 'exportPNG' ? 'png' : 'pdf';
const iframe = document.querySelector('iframe');
// 发送导出事件 message
iframe.contentWindow.postMessage(JSON.stringify({
event: 'dispatchCustomEvent',
data: ['hs_dashboard_export', {
type,
}]
}), '*');
});
</script>
</body>
</html>
监听嵌入页面的事件
在页面交互过程中，使用 postMessage 广播以下事件以方便更好的与业务融合，在业务页面使用
js
window.addEventListener('message', function handlePostMessage(event) {});来监听我们广播出的事件。目前嵌入场景支持以下事件。
- 目录、应用变更，包括目录文件夹、应用的新增、修改和删除，应用重新发布。
- 点击系统元素，点击对象为应用、文件夹、仪表盘、图表、数据集
- 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: 数据包