thingskit-base/public/MicroFrontend.js

/*
 * @Author: sjl
 * @Date: 2023-04-26 10:55:12
 * @Descripttion: 
 */
class MicroFrontend {
    constructor() {
        this.apps = {}; // 存储子应用的信息
        this.globalData = {}; // 存储全局数据
        this.init();
    }

    // 初始化方法
    init() {
        // 监听子应用的消息
        window.addEventListener('message', (event) => {
            // console.log("父消息：",event);
            const { data, source } = event;
            if (data.type === 'register') {
                // 子应用注册
                this.apps[data.name] = {
                    source,
                    loaded: false,
                };
            } else if (data.type === "logout") {
                if (globalEvent.wlwLogin) {
                    globalEvent.wlwLogin();
                    globalEvent.wlwLogin = null;
                }
            } else if (data.type === "js") {
                eval(data.message)
            } else if (data.type === 'loaded') {
                // 子应用加载完成
                this.apps[data.name].loaded = true;
            } else if (data.type === 'setGlobalData') {
                // 设置全局数据
                this.globalData[data.key] = data.value;
            } else if (data.type === 'getGlobalData') {
                // 获取全局数据
                const value = this.globalData[data.key];
                source.postMessage({
                    type: 'getGlobalData',
                    key: data.key,
                    value,
                }, '*');
            }
        });
        return this;
    }

    // 注册子应用
    register(name, id, url, callback,token) {
        console.log('register',url);
        const iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.token=token;
        iframe.id = id + '-iframe';
        iframe.style.width = "100%";
        iframe.style.height = "100%";
        iframe.style.opacity = "0.2";
        document.getElementById(id).appendChild(iframe);
        this.apps[name] = {
            source: iframe.contentWindow,
            loaded: false,
        };
        let app = this.apps[name] 
        // 发送注册消息给子应用
        iframe.contentWindow.postMessage({
          type: 'register',
          name,
        }, '*');
        iframe.onload = function () {
            setTimeout(()=>{
                // app.postMessage(token, '*');
            },
            3000)
          
            setTimeout(() => callback && callback(), 1000);
            setTimeout(() => iframe.style.opacity = "1", 4000);
        };
    }

    // 发送消息给子应用
    sendToApp(name, message) {
        console.log(message,'sendToApp');
        console.log(this.apps,'this.apps');
        console.log(name,'name');
        const app = this.apps[name];
        // if (app && app.loaded) {
            console.log(app,'app');
        if (app) {
            
            app.source.postMessage({
                type:'token',
                data:message.token,
                path:message.path
            }, '*');
            setTimeout(() => this.updateIframeDom(app.source), 1000);
            setTimeout(() => this.updateIframeDom(app.source), 2000);
            setTimeout(() => this.updateIframeDom(app.source), 3000);
            setTimeout(() => this.updateIframeDom(app.source), 4000);
        }
    }

    updateIframeDom(iframe) {
        var list = iframe.document.querySelectorAll('.jeecg-basic-table .ant-table .ant-table-row');
        if (list && list.length) {
            var dom = iframe.document.querySelectorAll('.jeecg-basic-table .ant-table');
            if (dom && dom.length) {
                dom.forEach(i => {
                    const tr = i.querySelectorAll('tr');
                    if(tr && tr.length > 9){
                        i.style.height = "calc(100vh - 350px)";
                    }
                })
            }
        }
    }

    // 设置全局数据
    setGlobalData(key, value) {
        this.globalData[key] = value;
        // 发送设置全局数据的消息给所有子应用
        Object.values(this.apps).forEach((app) => {
            if (app.loaded) {
                app.source.postMessage({
                    type: 'setGlobalData',
                    key,
                    value,
                }, '*');
            }
        });
    }

    // 获取全局数据
    getGlobalData(key) {
        // 发送获取全局数据的消息给所有子应用
        Object.values(this.apps).forEach((app) => {
            if (app.loaded) {
                app.source.postMessage({
                    type: 'getGlobalData',
                    key,
                }, '*');
            }
        });
    }
}