多看板集成-父页面异步消息交互

0 流程概览

1. url里面传入一个参数waitMsg=true，标记不要直接加载看板等消息
2. iframe所有相关资源加载好之后，postMessage给父页面，消息内容为‘ready’
3. 父页面接到消息之后，再把之前所有在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'，必须值，标识该消息类型
token	必须值，jwt token, 用于权限认证
userName	必须值，ibi用户名
password	必须值，ibi密码
boards	必须值，指定加载看板
baseServerUrl	可选值，切换ibi服务端地址
height	可选值，iframe页面内容器高度，为css style字符串
background	可选值，看板容器背景色
locale	可选值，国际化语言，cn/en

const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
    type: 'loadBoard',
    boards: [
                {boardId: 1, title: "表格看板2"},
                {boardId: 2, title: "综合看板2"},
            ],
    userName: 'peter',
    password: 'peter',
    // token: 'xxx',
    background: 'white',
    height: 'calc(100vh - 40px)',
}, '*');

4 更新boards数据

消息格式为js对象，boards为新看板数据

function updateBoard() {
    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>

专题分析集成

专题分析也是一种多看板组合形式，相较普通的多看板集成，专题分析有如下优势:

• 支持树形目录
• 支持多级目录结构
• 支持风格调整

1 页面集成url规范

url传参waitMessage=true
http://<ip>[:port][/ibi]/mini-app.html?waitMessage=true

2 等待iframe资源加载完毕消息

当集成iframe展示看板需要的js、css资源加载完毕之后，iframe会向父页面发送加载完毕消息,加载完毕消息为'ready'字符串

window.addEventListener('message', 
    function (event) {
        if (event.data == 'ready') {
           const iframe = document.getElementById('frm');
                iframe.contentWindow.postMessage({
                    type: 'load',
                    miniApp: {
                        // 专题分析结构
                    },
                    token: 'xxx', // 也可以是userName + password
                }, '*'); 
        }
    });

3 更新专题

const iframe = document.getElementById('frm');
iframe.contentWindow.postMessage({
    type: 'update',
    miniApp: {
        // 专题分析结构
    },
}, '*');

4 专题结构定义

const miniApp = {
    config: {
        navMode: 'left', // 导航栏位置，left/top
        topCenter: false, // navMode为top时是否居中
        header: {
            img: {
                show: true, // 是否显示logo, 此处的logo与系统的logo一致
                height: 32, // logo
            },
            title: {
                name: '专题名称',
            },
            backgroundColor: null,
        },
        nodes: [
            {
                layoutType: 'freelayout',
                label: '节点名称1',
                id: 231019110345677,
                type: 'board',
                sid: 'board-s3dsmfki9lf',
            },
            {
                layoutType: 'freelayout',
                label: '节点名称1',
                id: 220321175747615,
                type: 'board',
                sid: 'board-8bdxzbfwuq8',
                isDefault: true,
            }
        ],
        navMode: 'left',
        topCenter: false,
    }
};