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

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'，必须值，标识该消息类型
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>