Integration
Integration Using Async Message
Integration Using Async Message
Integration Using Async Message
0 Process Overview
- Pass a parameter
waitMsg=truein the URL to indicate that the kanban and other messages should not be loaded directly. - After all related resources in the iframe are loaded, send a
postMessageto the parent page with the message content'ready'. - After receiving the message, the parent page sends all previously passed data from the URL to the iframe.
1 Enable Async Mode
Add waitMessage=true as a URL parameter
http://ip:port[/ibi]/render-lite.html?waitMessage=trueThis mode only supports MultiKanban integration.
2 Wait iframe Message
After the js and css resources required for the integrated iframe to display the kanban are loaded, the iframe sends a load completion message to the parent page. The load completion message is the string 'ready'.
window.addEventListener('message', function (event) {
if (event.data == 'ready') {
vm.loadBoard();
}
});3 Send Load Boards Message
The message format is a JavaScript object, which must have the property type='loadBoard'. This message will only be triggered once in the iframe.
| Property Value | Explanation |
|---|---|
type | 'loadBoard' (required) - Identifies the message type. |
userName | (required) - IBI username. |
password | (required) - IBI password. |
boards | (required) - Specifies the kanban(s) to load. |
baseServerUrl | (optional) - Switch the IBI server address. |
height | (optional) - The height of the iframe page content container, as a CSS style string. |
background | (optional) - The background color of the kanban container. |
locale | (optional) - Internationalization language, cn / en. |
loadBoard() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'loadBoard',
boards: [
{boardId: 1, title: "Table Kanban 2"},
{boardId: 2, title: "Comprehensive Kanban 2"},
],
userName: 'peter',
password: 'peter',
background: 'white',
height: 'calc(100vh - 40px)',
}, '*');
},4 Change Boards
The message format is a JavaScript object. The boards property contains the new kanban data.
updateBoard2() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'updateBoard',
boards: [
{boardId: 3, title: "Map Collection"},
{boardId: 4, title: "Other Graphics Comprehensive Kanban"},
],
}, '*');
}5 Whole Example
<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: "Table Kanban"},
{boardId: 9, title: "Comprehensive Kanban"},
]
}
},
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: "Table Kanban 2"},
{boardId: 2, title: "Comprehensive Kanban 2"},
],
}, '*');
},
updateBoard2() {
const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
type: 'updateBoard',
boards: [
{boardId: 3, title: "Map Collection"},
{boardId: 4, title: "Other Graphics Comprehensive Kanban"},
],
}, '*');
},
},
mounted() {
let vm = this;
// Wait for the iframe resources to be ready and immediately send the load kanban message.
window.addEventListener('message', function (event) {
if (event.data == 'ready') {
vm.loadBoard();
}
});
}
}
</script>
<style>
</style>