外部系统集成
多看报集成父页面异步消息交互
多看报集成父页面异步消息交互
多看报集成父页面异步消息交互
0 流程概览
- url里面传入一个参数waitMsg=true，标记不要直接加载看板等消息
- iframe所有相关资源加载好之后，postMessage给父页面，消息内容为‘ready’
- 父页面接到消息之后，再把之前所有在url里面传递的数据传给iframe
1 开启异步交互模式
url传参waitMessage=true
http://ip:port[/ibi]/render-lite.html?waitMessage=true该模式只支持多看报集成
2 等待iframe资源加载完毕消息
当集成iframe展示看板需要的js、css资源加载完毕之后，iframe会向父页面发送加载完毕消息,加载完毕消息为'ready'字符串
window.addEventListener('message', function (event) {
if (event.data == 'ready') {
vm.loadBoard();
}
});3 向iframe发送初次加载看板所需数据
消息格式为js对象，需要有type='loadBoard'属性，该消息只会在iframe中触发一次
| 属性值 | 解释 |
|---|---|
| type | 'loadBoard'，必须值，标识该消息类型 |
| userName | 必须值，ibi用户名 |
| password | 必须值，ibi密码 |
| boards | 必须值，指定加载看板 |
| baseServerUrl | 可选值，切换ibi服务端地址 |
| height | 可选值，iframe页面内容器高度，为css style字符串 |
| background | 可选值，看板容器背景色 |
| locale | 可选值，国际化语言，cn/en |
loadBoard() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'loadBoard',
boards: [
{boardId: 1, title: "表格看板2"},
{boardId: 2, title: "综合看板2"},
],
userName: 'peter',
password: 'peter',
background: 'white',
height: 'calc(100vh - 40px)',
}, '*');
},4 更新boards数据
消息格式为js对象，boards为新看板数据
updateBoard2() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'updateBoard',
boards: [
{boardId: 3, title: "地图合集"},
{boardId: 4, title: "其他图形综合看板"},
],
}, '*');
}5 完整实例
<template>
<div style={{height: "calc(100vh - 160px)", overflow: "hidden"}}>
<button @click="updateBoard">UpdateBoard1</button>
<button @click="updateBoard2">UpdateBoard2</button>
<iframe id="frm" :src="shareUrl" style={{width: "100%", height: "100vh", border: "none"}}></iframe>
</div>
</template>
<script>
export default {
name: 'demo-iframe-tab2',
props: {},
components: {},
data() {
return {
boards: [
{boardId: 1, title: "表格看板"},
{boardId: 9, title: "综合看板"},
]
}
},
computed: {
shareUrl() {
let ret = `http://localhost:8026/cboard/render-lite.html?waitMessage=true`;
return ret;
}
},
methods: {
loadBoard() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'loadBoard',
boards: this.boards,
userName: 'peter',
password: 'peter',
background: 'white',
height: 'calc(100vh - 40px)',
}, '*');
},
updateBoard() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'updateBoard',
boards: [
{boardId: 1, title: "表格看板2"},
{boardId: 2, title: "综合看板2"},
],
}, '*');
},
updateBoard2() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'updateBoard',
boards: [
{boardId: 3, title: "地图合集"},
{boardId: 4, title: "其他图形综合看板"},
],
}, '*');
},
},
mounted() {
let vm = this;
// 等待iframe资源准备完毕立即发送加载看板消息
window.addEventListener('message', function (event) {
if (event.data == 'ready') {
vm.loadBoard();
}
});
}
}
</script>
<style>
</style>